异步初始状态 React-Redux Redux-Thunk答案

【问题标题】：Async initial state React-Redux Redux-Thunk异步初始状态 React-Redux Redux-Thunk
【发布时间】：2016-09-22 22:57:35
【问题描述】：

使用React、Redux、Redux-thunk 我想通过服务器请求（API 调用）获得初始状态，但我似乎无法让它工作。

到目前为止我得到了什么：

var Redux = require('redux');
var carReducer = require('./reducers/cars');
var thunk = require('redux-thunk').default;

var initialState = require('./reducers/initialState');

var rootReducer = Redux.combineReducers({
    cars: carReducer
});

module.exports = Redux.applyMiddleware(thunk)(Redux.createStore)(rootReducer, initialState.loadInitial());

这是我最初的商店创建。我的InitialState 看起来像这样：

var $ = require('jquery');

module.exports = {
    loadInitial: loadInitial
};

function loadInitial() {
    return {
        cars: [
            {}
        ]
    }
}

当我尝试将 loadInitial 转换为 $.get('api/...') 时，Redux 告诉我我需要一个初始状态才能使其工作。

在我的减速器中，我有一个加载方法：

function updateReducer(state, action) {
    switch (action.type) {
        case 'load':
            return action.data;
        case 'update':
            return updateCars(action.data, state);
        default:
            return action.data || initialState.loadInitial().cars;
    }
};

但同样，如果我使用 - 作为默认值 - 异步调用，它似乎不起作用。

我真正想要的是使用来自数据库的任何内容来初始化我的商店。这对于我的 HandsonTable 来说是必需的，因为我将属性传递给了表，并且我现在拥有它，它只会为我呈现一行，因为我的初始状态只有一个对象。

关于这一点的奇怪部分是，当我点击表格时，它实际上获取了我所有的行，因为数据已加载，但我猜为时已晚。

无论如何，我的问题是，如何通过对后端的 api 调用来初始化我的商店？

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

您可以给它一个空白的初始状态（空对象或者可能只是一条加载消息），当您的 API 调用返回时，您可以更新状态，并且您的组件将使用其新数据重绘。您可以做的另一件事是在调用返回您的数据之前不初始化您的组件。

编辑以包含示例

在组件的一个生命周期方法中（甚至可能在 getInitialState 中）：

getInitialState: function() {
  var oThis = this;

  $.get({
    url: 'api...',
    success: function (...) {
      oThis.setState({...data returned by server});
    }
  });

  return {};
}

或者，类似这样的事情：

$.get({
  url: 'api...',
  success: function (...) {
    var oStore;

    // oStore = response from server

    ReactDOM.render(
      <ReactRedux.Provider store={oStore}>
        <MyComponent/> 
      </ReactRedux.Provider>
      , document.getElementById()
    );
  }
});

【讨论】：

这有什么例子吗？我整个早上都在尝试这个
第二个确实有效！第一个没有，因为在这里，我还没有访问我的商店（它尚未创建）。我现在唯一想知道的是，这不会造成很多开销吗？（每次都重新加载商店？）
每次都会重新加载商店。但是，您多久从服务器获取新数据？在任何情况下，即使 store/state 确实更新了，react 也只会对实际更改的节点/组件做任何事情。
感谢克里斯托夫的帮助！我接受你的回答

【解决方案2】：

对于 redux 初始状态，您不能传递异步值，因此您需要传递一些静态空对象（就像您在示例中所使用的那样）并调用一个操作以从服务器获取初始状态并替换您的状态。为了简化所有这些过程，您可以使用 redux async initial state 中间件

【讨论】：