redux 原生数据封装--笔记记录

1、下载

npm i redux 

2、在src下创建store文件夹，创建index.js文件和reducer.js文件。

3、在reducer.js内创建一下数据结构

// 默认的状态数据源
let defultState = {
    num: 100,
    data: []
}
// 实现数据源跟action绑定，实现数据更新
function reducer(state = defultState, action) {

    switch (action.type) {
        case 'ADDITEM':
            let newState = {
                data: [
                    ...state.data,
                    // 添加新的对象
                    {
                        id: state.data.length + 1,
                        title: action.title
                    }
                ]
            }
            // console.log(newState);
            return newState;
        case 'DELITEM':
            state.data.splice(action.index, 1);
            // 返回老的state
            return state;
        default:
            // 返回本身
            return state;
    }
}
export default reducer

4、在action.js内引入以下文件

// 用来完成不同数据改变
const mutations = {
    // 递增
    increment(state,) {
        return {
            count: ++state.count
        }
    },
    // 递减
    decrement(state,) {
        return {
            count: --state.count
        }
    },
    // 覆盖
    cover(state, count) {
        return {
            count
        }
    }

}
export default mutations;

配置路由文件查看以前react-router专栏的内容。。