react的状态管理第一篇

听名字，我以为redux是react的官方状态管理(如同vuex)，redux并不是react独有的状态管理器，在其他的框架中也能够使用redux进行状态的管理。

Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。不管你有没有使用过它们，只需几分钟就能上手 Redux。

三大原则。
- 单一数据源，所有的状态都在唯一的对象树里面，即只存在于唯一的store，不能存在多个store。
- state是只读属性，唯一能修改state的方法是触发action，action是一个普通对象，其中type属性是必须的，原因稍后分析。
- 纯函数执行，reducer是纯函数，接受未修改前的state和action，返回新的state。reducer可以分为多个。
下面是创建reducer的例子，在src/store/index.js创建store。我们直接从代码中学习，只是文字很难看一遍就理解。

第一步，引入创建store的函数
    import { createStore } from 'redux'
第二步，定义reducer
    let countReducer = (state, actions) => {
        console.log(state, actions)
        return state
    }
第三步，生成store
    let store = createStore(countReducer)
第四部，到处
    export default store

组件内接受store（组件相关代码省略，根据个人自由发挥生成自己的组件）

第一步，引入store
    import Store from '../store'
第二步，答应出store
    {console.log(Store)}
第三步，为了观测到变化，组件中定义一个state
state = {
        count: Store.getState().count
}
定义一个修改组件内state.count为store.count的方法
getCount = () => {
    this.setState({
        count: Store.getState().count
    })
}

根据打印结果可知，state是undefined，很简单，我们没有设置初始的state。action也是乱七八糟的组成的字符串，这也很正常，因为我们本身目前也没定义action，redux随机生成的。
下面开始初始化state

1.创建一个初始化数据。
const initialState = {
    count: 1
} 
2.将初始化数据丢给reducer做默认值。
let countReducer = (state = {...initialState}, actions) => {
    console.log(state)
    return state
}
3.组件中进行获取
Store.getState()

此时可以发现，打印出来的state包含了状态，{count: 1}
前面已经实现了store的创建，又实现了初始化state，接下来我们需要做的就是如何去修改count的值。
设置相关的action

dispatch提交的action中有个type属性是必须的，请记住是提交，不是创建的action，对应需要触发的reducer中的方法，在store下面创建一个actions.js文件，用来保存相关的action操作。
第一种方法：常量创建
actions.js中的
const ADD_COUNT = 'ADD_COUNT'
const SUB_COUNT = 'SUB_COUNT'
index.js中引入
import {ADD_COUNT, SUB_COUNT} from './actions'
// reducer中使用
let countReducer = (state = {...initialState}, actions) => {
    switch(actions.type){
        case ADD_COUNT: 
            return Object.assign({}, state, {count: state.count +1})
        case SUB_COUNT: 
            return Object.assign({}, state, {count: state.count - 1})
        default: return state
    }
}

dispatch提交的action中有个type属性是必须的，请记住是提交，不是创建的action

上面中的reducer是用来修改state中的值，返回一个新的state，当提交的dispatch与之对应即会执行对应的修改。

组件中定义两个方法去触发对应的action

引入对应的actions
    import { ADD_COUNT, SUB_COUNT} from '../store/actions'

    add(){
        Store.dispatch({
            type: ADD_COUNT
        })
        this.getCount()
    }
    sub(){
        Store.dispatch({
            type: SUB_COUNT
        })
        this.getCount()
    }

add为提交增加count的action(ADD_COUNT)方法，sub为提交减少count的action(SUB_COUNT)方法。记得需要引入对应的action进行哦。使用常量的方式是为了更好的定位错误，如果直接在reducer中使用字符串也是可以进行触发的，提交的时候type为对应的字符串即可。

但是上面的虽然能提交增加和减少，但是默认都是增加1和减少1，如果我需要传递参数应当如何进行操作呢。

dispatch提交的action中有个type属性是必须的，请记住是提交，不是创建的action
    add(){
        Store.dispatch({
            type: ADD_COUNT,
            value: 20
        })
        this.getCount()
    }
    sub(){
        Store.dispatch({
            type: SUB_COUNT,
            value: 10
        })
        this.getCount()
    }

如上中代码，提交的时候是提交一个对象，type是必须的，对应相应需要触发的action，后面可以传递参数。这里传递的参数是value，因此在reducer中可以使用actions.value提取出我们传递过去的参数，然后进行操作，对应的reducer代码如下：

let countReducer = (state = {...initialState}, actions) => {
    switch(actions.type){
        case ADD_COUNT: 
        console.log(actions)
            return Object.assign({}, state, {count: state.count + actions.value})
        case SUB_COUNT: 
            return Object.assign({}, state, {count: state.count - actions.value})
        default: return state
    }
}

除此之外，我们还可以使用函数的方式来创建相应的actions

创建两个常量
export const ADD_SOME = 'ADD_SOME'
export const SUB_SOME = 'SUB_SOME'
创建对应的生成action的函数（这里的函数必须是满足dispatch提交的模式，所以type是必须的）
export function addSome(value) {
    return {
        type: ADD_SOME,
        value
    }
}
export function subSome(value) {
    return {
        type: SUB_SOME,
        value
    }
}

在reducer中创建对应的改变state的方法

let countReducer = (state = {...initialState}, actions) => {
    switch(actions.type){
        case ADD_COUNT: 
            return Object.assign({}, state, {count: state.count + actions.value})
        case SUB_COUNT: 
            return Object.assign({}, state, {count: state.count - actions.value})
        case SUB_SOME:
            return Object.assign({}, state, {count: state.count - actions.value})
        case ADD_SOME: 
            return Object.assign({}, state, {count: state.count + actions.value})
        default: return state
    }
}

上面修改和常量无差别，主要在reducer中实现对应type为什么值的时候，需要执行什么。

使用的时候会有一些差别，如下所示：

import {addSome, subSome,ADD_COUNT, SUB_COUNT} from '../store/actions'
    addValue(){
        Store.dispatch(addSome(10086))
        this.getCount()
    }
    subValue(){
        Store.dispatch(subSome(-10086))
        this.getCount()
    }

函数创建的方法其实和提交一个对象没有什么区别，只是将提交的对象封装成了一个函数，函数的形参对应传递的参数。需要的时候引入，调用函数，形参传递参数即可，无需再次引入常量，因为常量的type已经封装为函数返回的对象中的属性了。

原本打算一口气写完这个redux的，后面再介绍react-thunk和react-redux，但是量偏大，后续在更新，嘎巴的