React redux react-redux

191 阅读3分钟

遵循三大基本原则

  • 单一数据源

    • 整个应用的状态存储在单个 store 中的对象/状态树里

    • 单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序
  • state 状态是只读的

    • 改变状态的唯一方法是去触发一个动作

    • 动作是描述变化的普通 JS 对象

    • 就像 state 是数据的最小表示一样,该操作是对数据更改的最小表示

  • 使用纯函数来执行修改

    • 纯函数是那些返回值仅取决于其参数值的函数
  • 集中管理状态,更新状态时对其集中处理,不用去关心状态是如何分发到每一个组件内部的

工作原理

  • 数据都放在 store公共存储空间

  • 一个组件改变了 store 里的数据内容,其他组件就能感知到 store的变化,再来取数据,间接实现数据传递的功能

  • React Components 就告知 Store 需要获取数据 (Action Creactor) , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据

  • React Components 是借书的用户

  • Action Creactor 是借什么书

  • Store 是图书馆管理员

  • Reducer 是借书记录本

  • state 是书籍信息

image.png

说说你对Redux的理解?其工作原理? (qq.com)

数据如何通过 Redux 流动?

image.png

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工作流程

image.png

  • 常用中间件

    • redux-thunk

    • redux-saga

    • redux-actions

项目中是如何使用Redux的? 项目结构是如何划分的?

  • react-redux将组件分成

    • 容器组件:存在逻辑处理

    • UI 组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制

  • 通过redux将整个应用状态存储到store中,组件可以派发dispatch行为action给store,其他组件通过订阅store中的状态state来更新自身的视图

项目中如何使用redux

面试官:你在React项目中是如何使用Redux的? 项目结构是如何划分的? (qq.com)

redux的基础操作

redux的基础操作 - 掘金 (juejin.cn)

redux工程化

redux工程化 - 掘金 (juejin.cn)

Redux源码解读

Redux源码解读 - 掘金 (juejin.cn)

react-redux 及其源码

react-redux 及其源码 - 掘金 (juejin.cn)

基于redux重构TASK OA案例

基于redux重构TASK OA案例 - 掘金 (juejin.cn)

原文链接:blog.csdn.net/qq_44182284…