【Redux】reducer

reducer is 何

Reduxでの立ち位置

// Redux
[View]
 ↓
[Action]
 ↓
[Store]
  [Reducer]  ←これ  
 ↓
[View]

新しいState生成マシン Reducer

https://redux.js.org/basics/reducers

 (previousState, action) => nextState

// previousStateとactionをもとにnextStateを生成するのがReducer

previousStateを「変更する」のではなく、
previousStateとactionの2つからnextStateの1つを
全く新しく作っている、とみる

2つ→1つに減らすので「Reducer」

Reducerの例

qiita.com

function num (state, action) {
  switch(action.type) {
    case "SET_ORDER_NUM": 
      return action.num;                  
    case "ADD_ORDER_NUM": 
      return state + 1;
    dafault:
      return state;     //新しいstateを生成
  }
}

actionでは「状態を変更したい時の条件」を指定するのみで、
変更の内容はreducerで実装する