web-dev-qa-db-ja.com

reduxで初期状態を設定する方法

Reduxでストアの初期状態を設定する方法を見つけようとしています。私は https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js を例として使用しています。私は、todosの値が初期化されるようにコードを変更しようとしました。

const todoApp = combineReducers({
  todos,
  visibilityFilter
}, {
  todos: [{id:123, text:'hello', completed: false}]
})

ドキュメントに従って： http://redux.js.org/docs/api/createStore.html

しかし、それは機能していません、そして私は理由がよくわかりません。

reactjsreduxreact-redux
38
Saad

createStoreの2番目の引数である必要があります。

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

const initialState = { 
  todos: [{id:123, text:'hello', completed: false}] 
};

const store = createStore(
  rootReducer, 
  initialState
);
61
ctrlplusb

減速機で初期状態を設定できます。

const initialTodos = [{id:123, text:'hello', completed: false}]

// this is the ES2015 syntax for setting a default value for state in the function parameters
function todoReducer(state = initialTodos, action) {
  switch(action.type) {
    ... 
  }
  return state
}


const todoApp = combineReducers({
  // todos now defaults to the array of todos that you wanted and will be updated when you pass a new set of todos to the todoReducer
  todos: todoReducer,
  visibilityFilter
})
27
jmancherje

@ctrlplusbの回答ごとに、これが機能する理由は

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

最初のtodosは、レデューサーからの戻り値として2番目のtodosを設定するキーです。レデューサーは、ストアの作成時に常に1回実行されます。これにより、グローバルストアが初期化されます。

ストアの作成時にディスパッチされるアクションがあります。これが、結合された各レデューサーで提供される初期状態がストアで初期化される方法です。 redux開発ツールをチェックすると、ディスパッチされた最初のアクションが「@@ redux/INIT {something}」であることがわかります。

Reduxのドキュメントでは、ファイルの終わり近くにdispatch（{type：ActionTypes.INIT}）があります

こちらをご覧ください https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284

応答を明確にするstackoverflowで行ったこの質問/回答を参照してください： リデュースストアの初期グローバル状態を初期化する別の方法？

0
Vincent Tang