React四：Redux

Posted 2023-05-04

参考技术A

官网： https://www.redux.org.cn/

安装 Redux

合并多个Reducers

将redux和react结合

安装：

select 函数：从 state 截取，该组件需要的值，返回值类型必须是一个对象

高阶组件：传入需要的组件，可以从props里获取到需要的值和dispatch方法。

useSelector获取需要的值

useDispatch获取dispatch方法

useStore获取整个store

中间件-扩展redux的功能

action可以是是函数，并且把 dispatch 和 getState 作为函数参数，可以在函数中，进⾏异步操作 。

引入thunk

定义action

页面正常调用dispatch传入函数action

React中详解redux

redux

redux严格按照flux思想实现的一套框架，实现了单一数据流向。

组成部分

redux由四部分组成

action 组件发布的消息

store 存储消息的

reducers 捕获action，处理数据的方法

view 组件视图了

通信流程

一个组件发布action

action通过store被reducers捕获

reducers根据消息的类型处理数据

reducers将新的数据存储在store中

store将更新的数据传递给​​另一个组件​​了

注意：通信过程中，数据是作为state来存储了。

redux三大原则

单一数据源

整个应用中有且只能有一个store对象。

state是只读的

整个应用中的数据state是只读的，我们不能修改。我们可以通过getState方法获取state，但是不论是在组件中，还是在reducer中，我们不能直接修改state，在组件中，我们要发布action来修改state。

函数式编程

redux为了让我们开发更简单，建议我们采用函数式编程，也就是说每一个reducer都是一个函数，在函数中，我们更新state数据

体验redux

redux在设计之初，并不只是针对于react来设计了，希望能够在各个框架中使用，因此核心模块被抽象成可以公用的了，向在其他框架中使用，我们要安装相应的插件。

redux要在es6开发中使用，因此我们要安装该模块

npm install redux

redux模块提供了一些方法，供我们使用

redux方法

createStore 用来创建store的

参数是reducers方法

返回值是store对象

作用：存储应用程序的state数据

combineReducers 合并多个reducers

例如：使用路由的时候，可以通过该方法，合并路由的reducers

applyMiddleware 添加中间件

例如：在异步action中，添加中间件。

action

action就是一个消息对象，用来定义消息类型，和消息数据

通常用type表示消息类型（类型通常是不变，所以工作中要定义成常量）

数据部分属性名称没有限制，可以是任意的，例如data等等

reducers

用来接收action并处理的，类似观察者模式中的on方法，或者vuex中的mutations。

在redux中，被设计成一个函数

第一个参数表示state对象

第二个参数表示action对象

必须有返回值，就是更新的state数据

注意：如果state是引用类型的数据，一定要先复制再返回。

就是说要返回一个新的state对象。

当我们在创建store的时候，为了让state有默认值，会默认执行一次reducer，因此我们可以为state定义默认值并返回

store对象

dispatch 用来发布消息的（相当于观察者模式中trigger方法）

getState 获取state数据

replaceReducer 替代reducer

subscribe 监听state变化的

symbol symbol对象

举例：

// 引入redux
import  createStore  from redux;
// console.log(Redux);
// 消息名称定义成常量
const ADD = add;
const REMOVE = remove;
// 定义消息
let addNum =  type: ADD, num: 10 
let removeNum =  type: REMOVE, num: 5 
// 定义reduer
function reducer(state = 0, action) 
     // console.log(reducer, state, action);
     // 分析aciton类型
     switch (action.type) 
          case ADD:
          // 值类型数据，可以直接修改
          state += action.num;
          break;
          case REMOVE:
          // 处理减少数字的消息
          state -= action.num;
          break;
     
     // 必须有返回值，就是新的state
     return state;

// 创建store, 传递reducer
let store = createStore(reducer);
// 查看store
console.log(store)
// 监听state变化, 一定要在执行之前监听
store.subscribe(res => console.log(store.getState())) 
// 解构方法
let  dispatch  = store;
// 发布action
// store.dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(removeNum)