Redux流程分析 传统流程和redux-toolkit的使用

本文分析了Redux的官方推荐库,包括传统Redux流程与@reduxjs/toolkit的使用。传统流程涉及Action、Reducer和Store,通过action creator创建Action,Reducer处理State变化,Store保存数据并提供交互接口。Redux Toolkit简化了流程,提供了createSlice方法,支持深复制和自动处理异步操作。此外,文章探讨了在create-react-app中两种方法的区别。
摘要由CSDN通过智能技术生成

redux官方给的两种库

在这里插入图片描述

传统Redux流程写法

在这里插入图片描述

react-redux

在这里插入图片描述

Redux框架主要由Action、Reducer和Store三大元素组成。

action

Action是一个普通对象,其中存在的type属性是必须的,用来表示Action的名称,type一般被定义为普通的字符串常量。为了方便管理,一般通过action creator来创建action,action creator是一个返回action的函数。
在Redux中,State的变化会导致View的变化,而State状态的改变是通过接触View来触发具体的Action动作的,根据View触发产生的Action动作的不同,就会产生不同的State结果。可以定义一个函数来生成不同的Action,这个函数就被称为action creator。

Reducer

当Store收到action以后,必须返回一个新的State才能触发View的变化,State计算的过程即被称为Reducer。Reducer本质上是一个函数,它接受Action和当前State作为参数,并返回一个新的State。

  • 在子reducer中,一定要抛出一个reducer(实际上是一个由switch语句构成的函数)

Store

Store就是数据保存的地方,可以把它看成一个容器,整个应用中只能有一个Store。同时,Store还具有将Action和Reducers联系在一起的作用。Store具有以下的一些功能:
• 维持应用的 state;
• 提供getState()方法获取state;
• 提供dispatch(action)方法更新state;
• 通过subscribe(listener)注册监听器;
• 通过subscribe(listener)返回的函数注销监听器。
创建子store的方法

function reducer(initState,aciton)

流程(文字叙述)

createStore创建根store 一个store管理不同子store 合并子reducer使用方法combineReducers({}),使用applyMiddleware可以处理中间件.想要多个中间件就可以使用compose
reducer 其本质上可以写成swith case 语句.
根据不同的case分支来修改子store(action={type,payload}是信号,像一封邮件)
里面核心对原来state数据进行一次深复制 方法有很多种.
Object.assign jsonparse(jsonstringify)或者用immer等方法.

组件中 再app.jsx中安装react-redux库,使用<provider store></ provider>全局注入store上下文
如果在react16.8以前 只能使用connect(mapstate,mapdispatch)(component),然后在props上就能访问这些store数据\以及修改store的action的内部方法.
在16.8以后 更推荐useDispatch useSelector

异步问题

使用compose(applyMiddleWare(thunk), applyMiddleWare(logger))使用中间件,尤其是解决redux不支持异步action的问题。

import {
    createStore, combineReducers, applyMiddleware, compose } from 'redux'
import thunk 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值