Redux Combinereducer


私はReduxの概念を取得しようとしてどのようにビットと作品が機能している理解しています.私はここで正確に結合還元器の学習の経験を共有したいと思います.
Reduxのドキュメントとして、結合減速機の3つの規則があります.
ヒアリンクhttps://redux.js.org/api/combinereducers
認識されないどんな行動のためにでも
  • それは最初の引数としてそれに与えられた状態を返す必要があります.このポイントを詳しく説明するには、まず、還元フォルダの下にToDOSファイルを作成します.
    内容は以下の通りであるべきです、これは行動に基づく行動を変えます.デフォルトの状態を選択し、デフォルトの状態を返すようにします.
  • export default function todos(state = [], action) {
      switch (action.type) {
        case 'ADD_TODO':
          return state.concat([action.text])
        default:
          return state
      }
    }
    
    次に、カウンタと呼ばれる別のファイルを作成します.JSは、コンテンツは以下の通りですが、ここでは、単にインクリメントして、アクションに基づいてカウンタをdecrecmentingです.種類ここで初期状態はゼロです.
    export default function counter(state = 0, action) {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1
        case 'DECREMENT':
          return state - 1
        default:
          return state
      }
    }
    
    ここで、別のファイルの組み合わせを作成します.以下のように内容が下にある還元フォルダの中のJS、これは最初にReduxライブラリからCombinereducersを輸入します.Combinereducersは、値が{ todos: todos,
    counter: counter
    }
    であるオブジェクトを取ります、ES 6構文のように、我々は単に以下のようにそれを表すことができます:
    import { combineReducers } from 'redux'
    import todos from './todos'
    import counter from './counter'
    
    export default combineReducers({
      todos,
      counter
    })
    
    今最も興味深い部分インデックス.JSまたはアプリケーション.我々が店をつくって、行動とコンソールを派遣することをするJS.ログ記録内容は以下の通り.
    import { createStore } from 'redux'
    import combineReducers from './reducers/index'
    
    const store = createStore(combineReducers)
    console.log(store.getState());
    
    //1.First argument is only returned
    store.dispatch({
      type: 'ADD_TODO',
      text: 'This is the 1st argument from todos'
    }, { type: 'DECREMENT'})
    
    console.log(store.getState());
    
    store.dispatch({
      type: 'INCREMENT'
    })
    
    console.log(store.getState());
    
    store.dispatch({
      type: 'DECREMENT'
    })
    
    console.log(store.getState());
    
    store.dispatch({
      type: 'DECREMENT'
    })
    
    console.log(store.getState());
    
    コードの最初の行でreduxライブラリからcreatestoreをインポートします.
    コメントセクション1のコードでは、2つのパラメータを格納します.ディスパッチですが、以下のようになります.

    したがって、ルールは、最初の引数(のみ)として与えられた状態を返す必要があります.
    第2の規則は、それが未定義で戻る必要はないと述べます.したがって、我々は行動タイプがそこになければならないと言うことができます.type empty stringを持つオブジェクトが与えられた場合、出力は以下のように定義されません

    さて、3番目の規則では、与えられた状態が未定義であるか、単に空の文字列かNULLであれば、出力は以下の前の状態から実行されます.


    あなたの時間をありがとう.
    ハッピーラーニング