对react的redux的研究

1、什么是redux

 官方解释：redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。

2、为什么使用redux

当没有使用​​redux​​​时兄弟组件间传值将很麻烦，代码很复杂冗余。使用​​redux​​​定义全局单一的数据​​Store​​​，可以自定义​​Store​​里面存放哪些数据，整个数据结构也是自己清楚的。

3、state

前端中的state就是数据，就是一个对象。redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。

4、action

redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。

const INCREMENT = 'INCREMENT'
const incrementAction = {"type": INCREMENT, "count": 2}

上面这就是一个action，说白了就是一个对象，根据里面的type判断做什么操作。

5、reducer

数据​​state​​​，指示​​action​​都有了那么就是实现了。reducer就是根据action来对state进行操作。

const calculate = (state: ReduxState = initData, action: Action ) => {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}

export {calculate}

通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减。

6、store

store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。

import { createStore, combineReducers } from "redux";
import { calculate } from "./calculate";

// 全局你可以创建多个reducer 在这里统一在一起
const rootReducers = combineReducers({calculate})
// 全局就管理一个store
export const store = createStore(rootReducers)

7、dispatch

​​store.dispatch()​​是组件发出action的唯一方法。

store.dispatch(incrementAction);

通过store调用​​incrementAction​​，那么就直接把store里的数据修改了。