Redux - 异步加载初始状态 [英] Redux - Loading initial state asynchronously

问题描述

我正试图找出最简洁的方法来加载我的Redux商店的初始状态来源于API调用。

I'm trying to work out the cleanest way to load the initial state of my Redux stores when it comes from API calls.

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

I understand that the typical way of providing the initial state is to generate it server-side on page load, and provide it to Redux createStore() as a simple object. However, I'm writing an app that I'm planning on packaging up in Electron and so this doesn't work.

我能做到的最好的到目前为止，想出的是在创建将要去商店的初始状态的商店后立即触发一个动作 - 一个动作检索整个初始状态，或者一个动作，每个动作检索一个部分的初始状态的商店。这意味着我的代码看起来像：

The best that I've been able to come up with so far is to fire an action immediately after creating the store that will go and request the initial state for the store - either one action that retrieves the entire initial state or a number of actions that each retrieve the initial state for one part of the store. This would then mean that my code looks like:

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

虽然这会起作用，但看起来有点粗糙，所以我想知道是否有我缺少一些更好的替代方案？

Whilst this will work, it seems a bit on the crude side and so I'm wondering if there's some better alternative that I'm missing?

推荐答案

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

I also encountered the same problem (also building an electron app). A part of my store has application settings which gets persisted on local file system and I needed to load it asynchronously on application's startup.

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

This is what I come up with. Being a "newbie" with React/Redux, I am very much interested in knowing the thoughts of the community on my approach and how it can be improved.

我创建了一个异步加载存储的方法。此方法返回 Promise ，其中包含 store 对象。

I created a method which loads the store asynchronously. This method returns a Promise which contains the store object.

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);
    }
  });
};

然后在我的应用程序入口点，这是我如何使用它：

Then in my application entry point, here's how I used it:

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

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

Like I said, this is my naive attempt at solving this problem and I am sure there must be better ways of handling this problem. I would be very much interested in knowing how this can be improved.

这篇关于Redux - 异步加载初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！