异步初始状态 React-Redux Redux-Thunk [英] Async initial state React-Redux Redux-Thunk

问题描述

使用 React、Redux、Redux-thunk 我想通过服务器请求(API 调用)获得初始状态，但我不能似乎让这个工作.

Using React, Redux, Redux-thunk I want to have an initial state through a server request (API call) but I cannot seem to get this to work.

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

What I have got so far:

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 看起来像这样:

This is my initial store creation. My InitialState looks like this:

var $ = require('jquery');

module.exports = {
    loadInitial: loadInitial
};

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

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

When I try to turn this loadInitial into a $.get('api/...'), Redux tells me that I need an initial state in order for it to work.

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

In my reducer I have a load method:

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

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

But again, if I use - as a default - an async call, it does not seem to work.

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

What I actually want is for my store to be initialized with whatever comes from the database. This is needed for my HandsonTable, since I pass the properties to the table and as I have it now, it will only render me one row because my initial state has only one object.

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

Weird part about this is that when I click on the table, it actually gets me all my rows because the data is loaded, but I'm guessing just too late.

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

Anyway, my question here is, how do I initialize my store through an api call to my backend?

推荐答案

你可以给它一个空白的初始状态(空对象或者只是一个加载消息)，当你的 API 调用回来时，你可以更新状态和你的因此，组件将使用其新数据重新绘制.您可以做的另一件事是在调用返回您的数据之前不初始化您的组件.

You can give it a blank initial state (empty object or perhaps just a loading message) and when your API call comes back, you can update the state and your component will redraw with its new data as a consequence. The other thing you can do is not initialize your component until the call returns with your data.

编辑以包含示例

在组件的生命周期方法之一中(甚至可能在 getInitialState 中):

In one of your lifecycle methods of your component (perhaps even in getInitialState):

getInitialState: function() {
  var oThis = this;

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

  return {};
}

或者，类似这样的事情:

Or, something along these lines:

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

    // oStore = response from server

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

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