Async начальное состояние React-Redux Redux-Thunk

Использование React, Redux, Redux-thunk Я хочу иметь начальное состояние через запрос сервера (вызов API), но я не могу заставить его работать.Async начальное состояние React-Redux Redux-Thunk

То, что я получил до сих пор:

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 для моего бэкэнда?

источник

2016-05-25 Tikkes

Вы можете указать пустое начальное состояние (пустой объект или, возможно, просто загружаемое сообщение), и когда ваш запрос 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() 
    ); 
    } 
});

источник

2016-05-25 11:43:28 Christoph

Любой пример этого может быть? Я пробовал это все утро уже – Tikkes

Второй на самом деле работает! первый не сделал, потому что здесь у меня еще нет доступа к моему магазину (он не был создан). Единственное, что мне сейчас интересно, разве это не создает много накладных расходов? (перезагружать магазин каждый раз?) – Tikkes

Он собирается перезагружать магазин каждый раз. Но как часто вы получаете новые данные с сервера? В любом случае, даже если хранилище/состояние обновляется, реакция будет только когда-либо делать с узлами/компонентами, которые фактически изменились. – Christoph

Для redux, вы не можете передать значение async, поэтому вам нужно передать некоторый статический пустой объект (например, в вашем примере) и вызвать действие, чтобы получить начальное состояние с сервера. d замените ваше состояние. Чтобы упростить весь этот процесс, вы можете использовать redux async initial state промежуточное ПО

источник

2016-06-21 13:22:22

Async начальное состояние React-Redux Redux-Thunk

ответ

Смежные вопросы