15

を使用し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 呼び出しを介してストアを初期化するにはどうすればよいですか?

4

2 に答える 2

5

空白の初期状態 (空のオブジェクトまたは単に読み込み中のメッセージ) を与えることができ、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()
    );
  }
});
于 2016-05-25T11:43:28.563 に答える
4

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

于 2016-06-21T13:22:22.173 に答える