学习React之Redux（比较粗糙，用于自己理解）

最新推荐文章于 2025-04-23 14:15:38 发布

原创

最新推荐文章于 2025-04-23 14:15:38 发布 · 767 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文详细介绍了Redux在React开发中的应用，包括Redux的工作原理、核心概念如action、reducer和store，以及如何在React中使用Redux和处理异步action。同时，文章探讨了react-redux的使用、共享状态管理和开发者工具，强调了纯函数和高阶函数在Redux中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第1章 redux

1.1 redux理解

1.1.1 学习文档

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux

1.2.2 redux

redux是一个专门用于做状态管理的JS库(不是react插件库)，类似Vue的Vuex
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用: 集中式管理react应用中多个组件共享的状态

1.2.3 使用redux的场景

某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

1.2.4 redux工作原理

redux工作原理

把组件里要做的事情告知ActionCreators => 告知store,事情类型和数据
dispatch分发action 给 Store（c位）； store交给reducer去加工。reducer才是真正辛苦的人，加工完了，返回store
reducer得有之前得状态，是第二次。所以reducer有两件事情，初始化状态和加工状态
生活中的案例： react Components就相当于客人，点餐后给服务员，action Creator就相当于服务员，然后给老板（store）将这些点菜得给后厨（reducers）;做完以后返回，老板给客人吃

1.2 redux的三个核心概念

1.2.1 action

动作的对象
包含2个属性
1. type：标识属性, 值为字符串, 唯一, 必要属性
2. data：数据属性, 值类型任意, 可选属性
例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

1.2.2 reducer

用于初始化状态、加工状态。
加工时，根据旧的state和action，产生新的state的纯函数。

1.2.3 store

将state、action、reducer联系在一起的对象
如何得到此对象?
1)import {createStore} from 'redux'
2)import reducer from './reducers'
3)const store = createStore(reducer)
此对象的功能?
1. getState(): 得到state
2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

1.3 一套redux

constants.js

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

action.js

/* 
	该文件专门为Count组件生成action对象
*/
import {
   
   INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({
   
   type:INCREMENT,data})
export const createDecrementAction = data => ({
   
   type:DECREMENT,data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
   
   
	return (dispatch)=>{
   
   
		setTimeout(()=>