javascript - Redux - 异步加载初始状态

Question

当来自 API 调用时，我正在尝试找出最简洁的方法来加载我的 Redux 存储的初始状态。

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

到目前为止，我能想到的最好的方法是在创建商店后立即触发一个操作，该操作将去请求商店的初始状态 - 一个检索整个初始状态的操作或一个每次检索商店一部分的初始状态的操作数。这意味着我的代码看起来像:

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

虽然这会奏效，但它似乎有点粗糙，所以我想知道是否有更好的替代方案？

Answer 1

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

这是我想出来的。作为 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'));
});

就像我说的，这是我解决这个问题的幼稚尝试，我相信一定有更好的方法来处理这个问题。我非常想知道如何改进这一点。