遵循三大基本原则
-
单一数据源
-
整个应用的状态存储在单个 store 中的对象/状态树里
- 单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序
-
-
state 状态是只读的
-
改变状态的唯一方法是去触发一个动作
-
动作是描述变化的普通 JS 对象
-
就像 state 是数据的最小表示一样,该操作是对数据更改的最小表示
-
-
使用纯函数来执行修改
- 纯函数是那些返回值仅取决于其参数值的函数
-
集中管理状态,更新状态时对其集中处理,不用去关心状态是如何分发到每一个组件内部的
工作原理
-
数据都放在 store公共存储空间
-
一个组件改变了 store 里的数据内容,其他组件就能感知到 store的变化,再来取数据,间接实现数据传递的功能
-
React Components 就告知 Store 需要获取数据 (Action Creactor) , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据
-
React Components 是借书的用户
-
Action Creactor 是借什么书
-
Store 是图书馆管理员
-
Reducer 是借书记录本
-
state 是书籍信息
数据如何通过 Redux 流动?
react-redux的两个最主要功能?
-
Provider:提供包含store的context
-
connect:连接容器组件和傻瓜组件;接收两个参数
-
mapStateToProps把Store上的状态转化为内层傻瓜组件的prop
-
mapDispatchToProps把内层傻瓜组件中的用户动作转化为派送给Store的动作
-
Redux中异步的请求怎么处理
-
redux-thunk
-
redux-thunk dispatch 一个包含异步处理逻辑函数(thunk)
介绍Redux中间件
-
中间件其实就是一个函数,允许我们扩展redux应用程序,体现在对action的处理能力上
- 当组件触发一个action后,这个action会优先被中间件处理,当中间件处理完后,中间件再把action传递给reducer,让reducer继续处理这个action
-
加入中间件的redux工作流程
-
常用中间件
-
redux-thunk
-
redux-saga
-
redux-actions
-
项目中是如何使用Redux的? 项目结构是如何划分的?
-
react-redux将组件分成
-
容器组件:存在逻辑处理
-
UI 组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制
-
-
通过redux将整个应用状态存储到store中,组件可以派发dispatch行为action给store,其他组件通过订阅store中的状态state来更新自身的视图
项目中如何使用redux
面试官:你在React项目中是如何使用Redux的? 项目结构是如何划分的? (qq.com)
redux的基础操作
redux工程化
Redux源码解读
react-redux 及其源码
react-redux 及其源码 - 掘金 (juejin.cn)