Redux - 异步加载初始状态

Question

我试图找出最简洁的方法来加载我的Redux商店的初始状态,当它来自API调用时.

我知道提供初始状态的典型方法是在页面加载时生成服务器端,并将其作为简单对象提供给Redux createStore().但是,我正在编写一个我计划在Electron中打包的应用程序,所以这不起作用.

到目前为止,我能够提出的最好的方法是在创建将要去商店的初始状态的商店后立即触发操作 - 要么检索整个初始状态的一个操作,要么执行多个操作每个都检索商店的一部分的初始状态.这意味着我的代码看起来像:

const store = createStore(reducer, Immutable.Map(), middleware);
store.dispatch(loadStateForA());
store.dispatch(loadStateForB());
store.dispatch(loadStateForC());

虽然这会起作用,但它看起来有点粗糙,所以我想知道是否有一些更好的替代品,我错过了？

Answer 1

据我所知，你只有两个选择（逻辑上）：

\n\n

\n
1. 设置store实例化后的初始状态
\n
2. 设置store实例化时的初始状态
\n

\n\n\n\n

选项 1必须使用以下操作来完成：

\n\n

\n

改变状态的唯一方法是发出一个动作，一个描述发生了什么的对象。

\n

\n\n

\xe2\x80\x94文档中的“三个原则”之一

\n\n

这就是您尝试过的方法，但由于某种原因您认为它很粗糙。

\n\n\n\n

createStore另一种方法是在异步请求解决后调用。已经使用Promise对象发布了一个解决方案（由@Gaurav Mantri），这是一种很好的方法。

\n\n

我建议不要这样做，因为在它存在之前，您可能会有多个模块尝试require或import您的商店（或store.dispatch，或）；store.subscribe他们都必须期待Promises。第一种方法是最 Redux-y 的。

\n

Answer 2

我也遇到了同样的问题（也在构建电子应用程序）。我商店的一部分具有应用程序设置，这些设置会持久保存在本地文件系统上，我需要在应用程序启动时异步加载它。

这就是我的想法。作为React / Redux的“新手”，我非常有兴趣了解社区对我的方法的想法以及如何对其进行改进。

我创建了一个异步加载商店的方法。此方法返回Promise包含store对象的。

export const configureStoreAsync = () => {
  return new Promise((resolve) => {
    const initialState = initialStoreState;//default initial store state
    try {
        //do some async stuff here to manipulate initial state...like read from local disk etc. 
        //This is again wrapped in its own Promises.
        const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
        resolve(store);
      });
    } catch (error) {
      //To do .... log error!
      const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
      console.log(store.getState());
      resolve(store);
    }
  });
};

然后在我的应用程序入口点，这是我的用法：

configureStoreAsync().then(result => {
  const store = result;
  return ReactDOM.render(
    <Provider store={store}>
      <App store={store}/>
    </Provider>,
    document.getElementById('Main'));
});

就像我说的那样，这是我天真的解决这个问题的尝试，我相信必须有更好的方法来解决这个问题。我非常想知道如何进行改进。