web-dev-qa-db-ja.com

Redux Reducerでストアの初期状態を読み取る

Reduxアプリの初期状態は、次の2つの方法で設定できます。

  • createStoreの2番目の引数として渡します（ docs link ）
  • （サブ）リデューサーの最初の引数として渡します（ docs link ）

ストアに初期状態を渡す場合、ストアからその状態をどのように読み取り、レデューサーの最初の引数にしますか？

javascriptreactjsredux
82
cantera

簡単に言うと、初期状態をレデューサーに渡すのはReduxであり、何もする必要はありません。

createStore(reducer, [initialState])を呼び出すと、最初のアクションが入ったときにリデューサーに渡される初期状態がReduxに通知されます。

2番目のオプションは、ストアの作成時に初期状態を渡さなかった場合にのみ適用されます。つまり.

function todoApp(state = initialState, action)

状態は、Reduxから渡された状態がない場合にのみ初期化されます

5
Emilio Rodriguez

その状態をストアからどのように読み取り、レデューサーの最初の引数にしますか？

composeReducers（）はあなたのために仕事をします。それを書く最初の方法は本当に役に立ちません：

const rootReducer = combineReducers({ todos, users })

しかし、もう1つは同等であることがより明確です。

function rootReducer(state, action) {
   todos: todos(state.todos, action),
   users: users(state.users, action)
}
1
Nicolas

これがあなたのリクエストに応えることを願っています（intialStateを渡し、その状態を返す間にreducesを初期化すると理解しました）

これがその方法です（警告：TypeScriptコードからコピー）。

その要点は、mainReducer（factory）関数のif(!state)テストです

function getInitialState(): MainState {

     return {
         prop1:                 'value1',
         prop1:                 'value2',
         ...        
     }
}



const reducer = combineReducers(
    {
        main:     mainReducer( getInitialState() ),
        ...
    }
)



const mainReducer = ( initialState: MainState ): Reducer => {

    return ( state: MainState, action: Action ): MainState => {

        if ( !state ) {
            return initialState
        }

        console.log( 'Main reducer action: ', action ) 

        switch ( action.type ) {
            ....
        }
    }
}
0
Bruno Grieder