Redux

1、Redux

与vuex类比

原理图

使用步骤

安装  npm i redux@4.1.1 --save
注意：要加4.1.1，版本不同，有些写法不同

创建store 引用，只执行一次，因为用到了侦听器，变化就改，类似定时器写法

combineReducers

多个reducer需合并 引用时注意.对应的reducer

购物车案例

添加+删除操作，类似todolist

封装优化-便于维护

实际应将对应方法封装起来调用 各个store.js也封装起来统一在store-index.js中引用

2、Redux Toolkit

类似mutation的写法的Redux Toolkit状态管理器 卸载原版 -- npm uninstall redux 后安装 npm i redux 安装Redux Toolkit -- npm install @reduxjs/tooklit 用法 创建slice 数据操作 slice必须命名name:'',且初始值属性必须写成initialState, 购物车操作 创建store+集成 使用

3、React-Redux库

安装：npm install react-redux

使用

1、关联store

2、类似跨组件通讯，两个hooks函数配套使用操作状态

4、异步操作

使用

1.创建bannerSlice.js，获取+在store中存储数据

2、取数据渲染

4、示例(Redux Toolkit+react-redux)

1、改变count

1、创建sclice 暴露操作方法+默认暴露slice.reducer

2、集成store+默认暴露

3、关联store (跨组件通讯)

4、获取&操作数据 (利用react-redux的两个hooks函数)

2、购物车列表

1、创建sclice

2、集成store+默认暴露

3、关联store (跨组件通讯)

4、获取&操作数据 (利用react-redux的两个hooks 函数)

多个组件共同使用一个store

3、轮播图(异步操作)

1、创建sclice

1、利用fecth请求

2、利用axios请求(需安装axios库)

2、集成store+默认暴露+关联store (跨组件通讯) 同上案例

3、获取数据&渲染