管理状态Redux是专业的!!!

 1.使用原则

首先：什么情况下需要使用Redux???

• 某个组件的状态在其它组件中需要使用到，或者说多个组件需要共享状态
• 一个组件需要改变另一个组件的状态（通信）
• 能不使用就尽量不用，如果不用比较吃力才考虑使用

2.工作流程图（原理图） 

Redux的三个核心概念：

1. ActionCreators：顾名思义也就是动作的创建者，当组件触发一个action动作时，ActionCreators会自动创建一个动作对象，这个动作对象包含两个核心的属性：      type（动作类型）是必选属性、且唯一。data（携带的参数）是可选属性。                    eg:{type:'add',data:{number:1}}
2. Store：是存储状态的仓库，也是和组件获取状态直接对接的对象。它是Redux的核心，用于接收一个动作类型再指派给对应的Reducer处理。
3. Reducer：用于处理状态。它会接收到旧的state和动作类型，根据动作类型来加工状态。加工完成后返回新的state给Store。

3.代码演示

store

import { createStore } from 'redux'
import countReducers from './count_reducer'
//传入要被store管理的reducer
export default createStore(countReducers)

 reducer：本质上就是一个函数，接收两个参数：原始的状态（preState）、动作对象（action）

import { INCREMENT, DECREMENT } from "./constant";
export default function countReducers(preState = 0, action) {
    const { type, data } = action
    switch (type) {
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default:
            return preState
    }
}

 action：创建action对象，接收一个参数data

import { DECREMENT, INCREMENT } from "./constant";

export const crementIncrementAction = (data) => ({type:INCREMENT,data})
export const crementDecrementAction = (data) => ({type:DECREMENT,data})