Redux работает в dev, кажется, сломался в производстве

Question

У меня есть настольное приложение 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 не вызывается.

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

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

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

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()