React + Reduxを基本からまとめてみた【2】【Reducers】

Fluxフロー図

![flux_flow.png]
(https://camo.qiitausercontent.com/cdd0824a85a48f51dacc8ec20fa5cf5ce6ec8093/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3434303539332f33313139643830622d383163642d633664382d636233312d6132383837386261313738312e706e67)

Reducersとは

stateの変更を管理する役割を持っている

Reducersの役割

Actionsからデータを受け取り、Storeのstateをどう変更するのかを決める
⇨　Store内のstate(状態)の管理人

initialStateを作ろう

• Storeの初期状態
• アプリに必要なstateを全て記述
• exportしておく

initialState.js

//src/reducks/store/initialState.js
const initialState = {
   products: {

   },
   users: {
       isSignedIn: false,
       uid: "",
       username: ""
  }
};
export default initialState

Reducersの書き方(1)

reducers.js

//src/reducks/users/reducers.js
import * as Actions from './actions'
import initialState from '../store/initialState'

① actionファイル内のモジュールを全てimport (Actionsという名前を付ける)

② initialStateをimport

Reducersの書き方(2)

reducers.js

//src/reducks/users/reducers.js
import * as Actions from './actions'
import initialState from '../store/initialState'

export const UsersReducer = (state = initialState.users, action)=> {
//                   第一引数にstate   第二引数にactionがreturnした値
//Actionsのtypeに応じてstateをどう変更するか決める
switch (action.type) {
   case Actions.SIGN_IN:
     return {
　　　　　...state,
        ...action.payload
　　　}
   default:
        return state
    }
}

スプレッド構文とは
⇨ 配列やオブジェクトの要素を展開する
spred:広げる、開く

sample.js

const payload = {
    uid: '00000',
    username:'torahack'
}
console.log({...payload})
//{uid: '00000', username: 'torahack'}

//Merge Objects
const state = {
  isSignedIn: false,
  uid: "0",
  username: "fuga"
}
console.log({...state, ...payload})
// {isSignedIn: false, uid: "1", username: "hoge"}

参考サイト

日本一わかりやすいReact-Redux入門#5...Reducersの作り方とスプレッド構文の使い方
[React- Redux 入門]
(https://qiita.com/shtwangy/items/4f9993ade64c3c6858d3)