React Redux | Reducers

■Reducersの役割
■initialStateを作ろう
■Reducersの書き方1
■Reducersの書き方2
■参考元

■Reducersの役割

Actionからデータを受け取り
Storeのstateをどう変更するか決める

→Store内のstateの管理人

■initialStateを作ろう

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

const initialState = {
    products: {

    },
    users: {
        isSigned: false,
        uid: "",
        username:""
    }
}

export default initialState

const initialState = {

products: {

users: {

isSigned: false,

uid: "",

username:""

}

export default initialState

■Reducersの書き方1

1.actionsファイル内のモジュールを全てimport
(Actionという名前をつける)

2.initialStateをimport

import * as Actions from './actions'
import initialState from './store/initialState'

1 2	import * as Actions from './actions' import initialState from './store/initialState'

■Reducersの書き方2

・第一引数にstate
・第二引数にstateがstateがリターンした値
・Actionsのtypeに応じてstateをどう変更するのか決める

export const UsersReducer = (state = initialState.users, action) => {
    switch (Actions.type) {
        case Actions.SIGN_IN:
            return {
                ...state,
                ...action.payload
            }
        default:
            return state 
    }
}

export const UsersReducer = (state = initialState.users, action) => {

switch (Actions.type) {

case Actions.SIGN_IN:

return {

...state,

...action.payload

}

default:

return state

}

■参考元

分かりやすくおすすめです！