redux状态管理工具

1.下载安装

npm i redux

2.redux核心原理

store：数据存储对象

reducers：操作状态数的方法，需要两个参数，state状态数据对象，必须提供初始值；action数据操作对象，用来描述对那个数据进行什么样的操作{type:'操作类型'，data:'额外参数'}

actionCreators:生成数据操作对象action的方法

3.基本使用流程：

(1).创建reducer函数

// state状态数据的初始值, state必须要提供默认值
// action: 数据操作对象, 将来调用者传递 {type:'操作类型',data:'额外参数'}
function reducer(state={},action){
    switch(action.type){
            // 增加
        case '':
            // 
            break;
            // 删除
        case '':
            break;
        default:
            return state;
    }
}

(2).创建数据仓储对象

// 导入创建数据仓储对象的方法createStore
import {createStore} from 'redux';
// 创建数据仓储对象
const store=createStore(reducer函数);

4.store数据仓储对象核心成员

(1).getState:获取数据仓储对象中的数据

store.getState();

(2).dispatch:发送数据操作对象action给reducer函数，让其完成数据操作

store.dispatch({type:'操作类型',data:'额外参数'})

(3).subscribe:监视数据仓储对象中的数据变化

store.subscribe(()=>{
    // 通知视图更新
})

5.actionCreators

自定义方法，负责返回一个数据操作对象action

// actionCreator: 负责创建数据操作对象action
// function cartUpdate(data){
//     return {
//         type:'cart/update',
//         data
//     }
// }
export const cartUpdate=(data)=>({type:'cart/update',data});
export const cartDel=(data)=>({type:'cart/del',data});