Redux在dev中工作，似乎打破了生产

Question

我有一个包含React + Redux应用程序的Electron桌面应用程序。 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();
}

我希望使用检索到的产品更新状态，然后组件应该使用更新的存储状态作为道具重新呈现。

相反，存储状态更新 - as I can see it in Redux DevTools - 但连接组件永远不会重新渲染，componentDidUpdate也不会被调用。

Answer 1

我花了很多天才有同样的感觉和问题。在检测到生产中，redux的订阅功能仍然有效，但react-redux无法正常连接，我尝试降级并且有效。

Answer 2

你能尝试删除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__()

Answer 3

将以下内容添加到electron-webpack.config.json解决了这个问题，react-redux必须列入白名单。

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