Redux基本使用（React）

一、安装 redux

yarn add redux
npm i redux

二、配置状态机

Redux 的核心分为三个部分：

store：保存数据

dispatch：调用 reducer，同时传递 action 给 reducer reducer：接收 action，通过 action
的类型来修改数据

action：用于给所有修改数据的操作进行命名，同时传递额外的参数

1）创建 store 对象

在项目 src 目录中，创建一个 redux 目录，然后在 redux 中再创建一个 store.js，作为整个仓库的主文件：

import { createStore } from "redux"; 
const store = createStore();

2）在 store 中保存数据

const store = createStore((state = 0) => {
    // 真正 return 的数据，才是保存到仓库的数据
    return state;
});

3）获取仓库数据

console.log(store.getState());

注意：需要在 index.js 中引入该文件让代码运行。

// 引入仓库主文件
import ‘./redux/store’

4）修改仓库数据

修改数据，需要 redux 中的三个核心模块一起配合工作。

store

// 触发修改数据的操作:该方法只负责发号施令，让别人来执行真正的修改操作
store.dispatch();

action
每一个 action 都是一个对象，都有一个固定的 type 属性，用来对当前的操作进行命名。

const incrementAction = {
    type: 'increment'
}

const decrementAction = {
    type: 'decrement'
}
//action 对象除了 type 属性以外，还可以自己添加任意属性，用来传递额外的参数：

const inputCountAction = {
    type: 'inputCount',
    payload: '10'
}

store 和 action
当我们想要触发指定的操作时，就将对应的 action 对象传递给 dispatch 即可：

store.dispatch(incrementAction);
store.dispatch(decrementAction);
reducer
const reducer = (state = 0, action) => {
    console.log('reducer 接收到的 action', action);
    switch (action.type) {
        case "increment": return state + 1;
        case "decrement": return state - 1;
        default: return state;
    }
}