使用Redxu管理数据

其中核心模块式action、store、reducer，一般情况下先写reducer的逻辑，相当于MVC中的控制器controller，实现对数据的操作、修改，但凡涉及到数据的改变，都需要reducer介入。

reducer实际上是一个普通函数，有两个参数state、action，state表示之前仓库中的状态(数据)，action表示要做什么的对象

/**
 * reducer 本质上是一个普通函数
 * @param {*} state 之前仓库中的状态(数据)
 * @param {Object} action 要做什么，约定格式为 {type:"操作类型", payload:附加数据}
 */
function reducer(state, action) {
    //  返回一个新的状态
    if (action.type === 'increase') {
        return state + 1;
    } else if (action.type === 'decrease') {
        return state - 1;
    } else {
        // 如果是一个无效的操作类型，数据不变
        return state;
    }
}

reducer一般由自己编写逻辑，store可以通过Redux中的createStore()方法创建

const store = createStore(reducer, state);
const action = { type: 'increase' };
//通过store中的dispatch分发action
store.dispatch(action);
//通过store中的getState()拿到最新的数据
store.getState()

// 完整代码：src/redux/index.js
import { createStore } from 'redux';
/**
 * reducer 本质上是一个普通函数
 * @param {*} state 之前仓库中的状态(数据)
 * @param {Object} action 要做什么，约定格式为 {type:"操作类型", payload:附加数据}
 */
function reducer(state, action) {
    //  返回一个新的状态
    if (action.type === 'increase') {
        return state + 1;
    } else if (action.type === 'decrease') {
        return state - 1;
    } else {
        // 如果是一个无效的操作类型，数据不变
        return state;
    }
}
// 初始值为10
const store = createStore(reducer, 10);
const action = { type: 'increase' };
console.log('old store:', store.getState()); // 得到仓库中当前的数据
// 向仓库分发action
store.dispatch(action);
console.log('new store:', store.getState()); // 得到仓库中当前的数据