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这就可以啦！