创建 Action Types 的变量

写大型项目时，会产生许多的Action Types，每次写Action的地方都要写一个Type，会产生冗余代码，且type需要一一对应，会产生书写错误，影响效率

1.创建一个单独管理Type的文件

export const CHANGE_VALUE = 'changeValue'
export const ADD_ITEM = 'addItem'
export const DELETE_ITEM = 'deleteItem'

2.引入组件使用

import { CHANGE_VALUE , ADD_ITEM , DELETE_ITEM } from './store/actionTypes'


ChangeValue(e){
    const action = {
        type:CHANGE_INPUT,
        value = e.target.value
    }
}

3.引入Reducer进行修改


import {CHANGE_VALUE,ADD_ITEM,DELETE_ITEM} from './actionTypes'
export default (state = defualtState,action)=>{
    if(action.type===CHANGE_VALUE){
        let newState = Json.parse(Json.stringfy(state))
        newState.inputValue = action.Value
        return newState
    }
}

管理Redux Action

把项目中所有的Redux Action 整理到一个文件内进行管理，提高项目可维护性，防止代码混乱

建立文件actionCreators.js

import{CHANGE_VALUE} from"./actionTypes"

exoport const changeAction=(value)=>{
type:CHANGE_VALUE,
value
}

修改list代码

import{changeAction} from"./actionCreatores"

changeValue(e){
    const action = changAction(e.target.value)
    
    store.dispatch(action)
}

Redux注意的三个点

store必须是唯一的，多个store是坚决不允许，只能有一个store空间
只有store能改变自己的内容，Reducer不能改变
Reducer必须是纯函数（如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。简单来说纯函数的返回值只受参数的变化）

Redux-thunk

Redux-thunk是Redux最常用的插件

在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。这个中间件可以使用是Redux-thunk来进行增强(当然你也可以使用其它的)，它就是对Redux中dispatch的加强

npm install --save redux-thunk // 安装

配置Redux-thunk组件

//使用中间件需要引入applyMiddleWare
import { createStore , applyMiddleware } from 'redux' 
//引入thunk
import thunk from'redux-thunk'

//官方实例
const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

creatStore只允许有两个函数存在，我们需要使用增强函数compose

 import { createStore , applyMiddleware, compose } from 'redux' 
 
// 使用compose创建一个增强函数,相当于一个链式函数
const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose

const enhancer = composeEnhancers(applyMiddleware(thunk)) //把中间件加入进来，这样两个函数就会执行了
const store = createStore(reducer,enchancer) 
export default store

Redux-thunk使用方法

之前actionCreators.js 文件中都是定义好的action方法，没有办法写业务逻辑，安装Redux-thunk之后可以把TodoList中的业务逻辑放到这里编写。

import axios from'axios'

export cosnt getTodoList=()=>{
    return ()=>{
        axios.get('https:xxxx').then(res=>{
        const data = res.data
        console.log(data)
        })
    }
}

修改TodoList.js


import {getTodoList , changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreatores'

componentDidMount(){
     getTodoList()
}

修改getTodoList

import axios from'axios'

export cosnt getTodoList=()=>{
    return ()=>{
        axios.get('https:xxxx').then(res=>{
        const data = res.data
        const action = getListAction(data)
        dispatch(action) //在这里直接可以使用dispatch把action传递
        })
    }
}

export const getListAction  = (data)=>({
    type:GET_LIST,
    data
})

如果你是初学redux感觉此方法很绕，但是随着项目的越来越大，你会发现把共享的state的业务逻辑放到你的Redux提示当中是非常正确的，很香

Redux入门教程（二）

创建 Action Types 的变量

管理Redux Action

Redux注意的三个点

Redux-thunk

Redux-thunk使用方法