react 生态圈之 Redux

清疚 2022-11-11 14:41 177阅读 0赞

#### 一、Redux 前端为何需要状态管理库 ####

1.  `Redux`，`JS` 状态管理框架，`Redux` 让组件通信更加容易，把 `store` 放在组件外，所有组件和 `store` 进行中转
2.  `Redux` 特性，如下所示：

*  单向数据流
 *  可预测性，`state + action = new state`
 *  纯函数更新 `Store`

#### 二、Redux 深入理解 Store、Action 和 Reducer ####

1.  `store` 可以通过 `createStore`，传入 `reducer` 进行创建，包含三个方法，如下所示：

*  `getState()`，获取当前的状态
 *  `dispatch(action)`，派发一个 `action`
 *  `subscribe(listener)`，监听 `store` 的变化

1.  `(state，action) => new state`，如下所示：

*  `Store`
 *  `Actions`
 *  `Reducer`
 *  `View`

1.  `combineReducers`，能够接受多个 `reducer` 作为参数，最终返回一个封装后的 `reducer`
2.  `bindActionCreators`，将单个或多个 `ActionCreator` 转化为 `dispatch(action)` 的函数集合形式，不用再手动 `dispatch(actionCreator(type))`，而是可以直接调用方法

#### 三、在 React 中使用 Redux ####

1.  `connect` 的工作原理，高阶组件

#### 四、Redux 理解异步 Action、Redux 中间件 ####

1.  `(state，action) => new state`，如下所示：

*  `Store`
 *  `Actions`
 *  `Reducer`
 *  `View`
 *  `Middleware`

1.  `Redux` 中间件，`Middleware`，如下所示：

*  截获 `action`
 *  发出 `action`

1.  异步 `action` 不是特殊 `action`，而是多个同步 `action` 的组合使用
2.  中间件在 `dispatcher` 中截获 `action` 做特殊处理

#### 五、Redux 如何组织 Action 和 Reducer ####

1.  标准形式 `Redux Action` 的问题，如下所示：

*  所有 `Action` 放一个文件，会无限扩展
 *  `Action、Reducer` 分开，实现业务逻辑时需要来回切换
 *  系统中有哪些 `Action` 不够直观

1.  新的方式，单个 `action` 和 `reducer` 放在同一个文件
2.  新的方式，每个文件一个 `Action`，如下所示：

*  易于开发，不用在 `action` 和 `reducer` 文件间来回切换
 *  易于维护，每个 `action` 文件都很小，容易理解
 *  易于测试，每个业务逻辑只需对应一个测试文件
 *  易于理解，文件名就是 `action` 名字，文件列表就是 `action` 列表

#### 六、Redux 理解不可变数据 immutability ####

1.  不可变数据 `immutable data`，需要不可变数据，如下所示：

*  性能优化
 *  易于调试和跟踪
 *  易于推测

1.  如何操作不可变数据，如下所示：

*  原生写法，`{...}, Object.assign`
 *  `immutability-helper`
 *  `immer`

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 React系列之Redux

1 Redux概述 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。[Redux中文文档][Redux] Redux 和react没有必然关系，

比眉伴天荒/ 2024年03月26日 11:25/ 0 赞/ 51 阅读

相关 react 生态圈之 React Router

一、React Router，路由不止是页面切换，更是代码组织方式 1. 为什么需要路由，如下所示：单页应用需要进行页面切换通过 `URL` 可以定位

﹏ヽ暗。殇╰゛Y/ 2022年11月11日 14:41/ 0 赞/ 188 阅读

相关 react 生态圈之 Redux

一、Redux 前端为何需要状态管理库 1. `Redux`，`JS` 状态管理框架，`Redux` 让组件通信更加容易，把 `store` 放在组件外，所有组件和 `

清疚/ 2022年11月11日 14:41/ 0 赞/ 178 阅读

相关「HearLing」React学习之路-redux、react-redux

前言这篇文章零基础也可以看，我尽量写得简单易懂了，如果觉得理解起来有点费力，也可以先去官网入门。目前我还只是初学React，只能算入门，如果有哪里说的不对的，

小咪咪/ 2022年09月02日 14:48/ 0 赞/ 226 阅读

相关 Redux之react-redux简单项目入门

一：效果图 ![70][] 二：目录结构注意：已经安装了react官方脚手架（进行修改） ![70 1][] 三：相关代码

一时失言乱红尘/ 2022年05月20日 02:05/ 0 赞/ 210 阅读

相关 react redux redux-saga

react是前端view框架 redux是前端状态管理器 redux-saga是redux的升级版，异步状态管理 `saga.js`管理异步状态变更，一般是

柔光的暖阳◎/ 2022年02月18日 11:11/ 0 赞/ 286 阅读

相关 React教程之十分钟入门Redux(react-redux-starter)

前言网上的教程的确很多，也很杂乱，看了半天，redux的都没讲清楚什么，`概念都有点生硬`，这里经过转换一下概念和简单的demo实战，希望可以帮助大家更好的理解Redu

绝地灬酷狼/ 2021年12月21日 12:53/ 0 赞/ 348 阅读

相关 Flux、Redux到react-redux发展衍变之react-redux解读

首先要知道，Redux只是一种MVC的机制，它可以运行在任何的前端框架中。react-redux则是对Redux的核心模块(如store)进行封装，并加入了一些有利于react

水深无声/ 2021年09月17日 04:08/ 0 赞/ 359 阅读

相关 Flux、Redux到react-redux发展衍变之Redux解读

续上篇，在Flux后，为了更好的实现MVC，Redux模式出现。不同于 Flux ，Redux 不再有 dispatcher 的概念（Store已经集成了dispatch方

「爱情、让人受尽委屈。」/ 2021年09月17日 03:01/ 0 赞/ 322 阅读

相关 react react-redux

react-redux 和redux一样效果,不同实现安装 cnpm install react-redux --save

蔚落/ 2021年07月24日 16:29/ 0 赞/ 449 阅读