web-dev-qa-db-ja.com

非同期初期状態React-ReduxRedux-Thunk

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はそれが機能するために初期状態が必要であると教えてくれます。

私のレデューサーにはloadメソッドがあります：

_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に必要です。これは、プロパティをテーブルに渡すためです。現在のように、初期状態にはオブジェクトが1つしかないため、1行しかレンダリングされません。

これについての奇妙な部分は、テーブルをクリックすると、データがロードされているため、実際にはすべての行が表示されることですが、推測が遅すぎます。

とにかく、ここでの私の質問は、バックエンドへのAPI呼び出しを介してストアを初期化するにはどうすればよいですか？

reactjsreduxreact-thunk
13
Tikkes

空白の初期状態（空のオブジェクトまたは単に読み込み中のメッセージ）を指定できます。API呼び出しが戻ってきたら、状態を更新できます。その結果、コンポーネントは新しいデータで再描画されます。他にできることは、呼び出しがデータとともに返されるまでコンポーネントを初期化しないことです。

例を含めるように編集

コンポーネントのライフサイクルメソッドの1つ（おそらく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()
    );
  }
});
4
Christoph

Reduxの初期状態の場合、非同期値を渡すことはできないため、静的な空のオブジェクト（例のように）を渡し、アクションを呼び出してサーバーから初期状態を取得し、状態を置き換える必要があります。このすべてのプロセスを単純化するために、次を使用できます redux async initial state ミドルウェア

4
Alexandr Subbotin