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

您能尝试只删除composeWithDevTools

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

因为下面的例子是React Web Base应用程序商店。它也不能与redux devtools一起使用

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

我删除了这部分

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

在生产构建之前，否则需要浏览器dev插件。所以我希望当地人的反应也一样。

Answer 2

我花了很多天与您一样的感受和问题。在生产中检测到redux的订阅功能仍然有效之后，但是react-redux无法正确连接，我尝试降级并正常工作。

Answer 3

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

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

Redux在开发人员中工作，似乎量产了

3 个答案: