Блог

У меня есть настольное приложение Electron, содержащее приложение React Redux. Redux отлично работает при локальном запуске приложения в процессе разработки, но не обновляет компоненты после того, как приложение было встроено в собственное настольное приложение.

Многие статьи и проблемы, похоже, считают, что хранилище настроено неправильно, или что я напрямую изменяю состояние, а не обновляю его, или что моя mapStateToProps функция настроена неправильно.

Я не вижу, как что-либо из этого может быть проблемой, поскольку мое приложение работает во время разработки, и я вижу, что хранилище обновляется, а компонент повторно отображается.

Однако в процессе производства происходит следующее:

• Состояние хранилища инициализировано
• Отправляется действие
• Состояние обновляется (я вижу в инструментах разработки)
• Ни один из моих подключенных компонентов не перерисовывается с обновленными реквизитами.

Единственное различие, которое я вижу между разработкой и производством, заключается в том, что в Electron во время разработки приложение загружается через http://localhost , а во время производства оно загружается через file:///

Мой магазин настроен как:

 export const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
  

Хранилище предоставляется как:

 <Provider store={store}>
    <App />
</Provider>
  

Я подключаю свой компонент к хранилищу как:

 const mapStateToProps = (state: RootState) => {
    return {
        hasLoaded: state.products.hasLoaded,
        products: state.products.products
    };
};

const mapDispatchToProps = {
    getProducts: getProducts
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ProductsList);
  

Затем вызываем GetProducts изнутри компонента, например:

 componentDidMount() {
    this.props.getProducts();
}
  

Я ожидаю, что состояние будет обновлено с помощью извлеченных продуктов, а затем компонент должен повторно отображать обновленное состояние хранилища в качестве реквизита.

Вместо этого состояние хранилища обновляется — как я вижу это в Redux DevTools — но подключенный компонент никогда не перерисовывается и не componentDidUpdate вызывается.

Я провел много дней с тем же чувством и проблемой, что и вы. Обнаружив, что в производстве функция подписки из redux все еще работала, но react-redux не удалось подключиться должным образом, я попробовал понизить рейтинг, и это сработало.

Можете ли вы попробовать просто удалить composeWithDevTools ?

 export const store = createStore(rootReducer, applyMiddleware(thunk));
  

В приведенном ниже примере используется хранилище приложений React. Он также не работает с Redux devtools.

 const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ amp;amp; window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);
  

Я удалил эту часть перед производственной сборкой, потому что для этого требовался плагин для разработчиков браузера; Я надеюсь, что React Native будет таким же.

 window.__REDUX_DEVTOOLS_EXTENSION__ amp;amp; window.__REDUX_DEVTOOLS_EXTENSION__()
  

Добавление следующего в electron-webpack.config.json решило проблему, react-redux должен быть внесен в белый список.

 {
    "whiteListedModules": ["react-redux"]
}