Redux進階一：提取action

前提：正在看這篇文章的你請務必保證我的上一篇文章《Redux入門級別操作演示》https://www.jianshu.com/p/55a4862eccc1

已經看完，否則！你看不懂這篇文章....因爲！這篇文章是建立上上一篇文章的基礎上⬆️

上一篇文章只是簡單的將通過redux實現功能，但是細心的夥伴發現nav.js和reducer.js中都會定義action對象，如果兩個文件中由於書寫錯誤不一致的話，就會出現問題，而且如果狀態多的話，管理起來就會不方便，所以我們需要對action進行一下封裝，這樣，統一管理action

首先需要建立一個actionType.js專門存放action狀態

actionType.js

export const ACTION_TITLE = 'action_title'
//...........假設有很多個action

下面需要建立一個actionCreators.js文件專門存放action對象，注：下面的寫法是一個函數返回一個對象

actionCreators.js

import {ACTION_TITLE} from './actionTypes' //這款換成你自己的地址

export const getTitle =(title)=> ({
  type: ACTION_TITLE,
  title
})

這樣的話，用到狀態的地方也需要改變，用到狀態的地方即是狀態的發出者：nav.js

nav.js

import {getTitle} from './actionCreators'
  handleClick =({item,key})=> {
        //註釋的是之前的代碼
        // const action = {
        //     type: 'action_title',
        //     title: item.props.title
        // }
        const action = getTitle(item.props.title)  //這樣的話就是傳給對象一個參數
        store.dispatch(action)
        this.setState({
            currentKey:key  
        })
    }

同理reducer.js文件中action.type也必須變成定義的變量

reducer.js

import {ACTION_TITLE} from './actionTypes'
const defaultState = {
  titleValue: '首頁',
}
//reducer 可以接受state但是不可以修改state 只有store才能改變
//純函數值得是，制定固定的輸入，就一定會有固定的輸出，而且不會有任何副作用
export default (state = defaultState, action)=> {
  console.log('action',action);
  if(action.type === ACTION_TITLE){
    const newState = JSON.parse(JSON.stringify(state))
    newState.titleValue = action.title
    return newState
  }
  return state;
}

//必須返回的是函數

OK這就可以啦！