说说你对Redux的理解?其工作原理?

开发 前端
React是用于构建用户界面的,帮助我们解决渲染DOM的过程,而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享

[[411631]]

一、是什么

React是用于构建用户界面的,帮助我们解决渲染DOM的过程

而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享

如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程

这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的

redux就是一个实现上述集中管理的容器,遵循三大基本原则:

  • 单一数据源
  • state 是只读的
  • 使用纯函数来执行修改

注意的是,redux并不是只应用在react中,还与其他界面库一起使用,如Vue

二、工作原理

redux要求我们把数据都放在 store公共存储空间

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

工作流程图如下所示:

根据流程图,可以想象,React Components 是借书的用户, Action Creactor 是借书时说的话(借什么书), Store 是图书馆管理员,Reducer 是记录本(借什么书,还什么书,在哪儿,需要查一下), state 是书籍信息

整个流程就是借书的用户需要先存在,然后需要借书,需要一句话来描述借什么书,图书馆管理员听到后需要查一下记录本,了解图书的位置,最后图书馆管理员会把这本书给到这个借书人

转换为代码是,React Components 需要获取一些数据, 然后它就告知 Store 需要获取数据,这就是就是 Action Creactor , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据

三、如何使用

创建一个store的公共数据区域

  1. import { createStore } from 'redux' // 引入一个第三方的方法 
  2. const store = createStore() // 创建数据的公共存储区域(管理员) 

还需要创建一个记录本去辅助管理数据,也就是reduecer,本质就是一个函数,接收两个参数state,action,返回state

  1. // 设置默认值 
  2. const initialState = { 
  3.   counter: 0 
  4.  
  5. const reducer = (state = initialState, action) => { 

然后就可以将记录本传递给store,两者建立连接。如下:

  1. const store = createStore(reducer) 

如果想要获取store里面的数据,则通过store.getState()来获取当前state

  1. console.log(store.getState()); 

下面再看看如何更改store里面数据,是通过dispatch来派发action,通常action中都会有type属性,也可以携带其他的数据

  1. store.dispatch({ 
  2.   type: "INCREMENT" 
  3. }) 
  4.  
  5. store.dispath({ 
  6.   type: "DECREMENT" 
  7. }) 
  8.  
  9. store.dispatch({ 
  10.   type: "ADD_NUMBER"
  11.   number: 5 
  12. }) 

下面再来看看修改reducer中的处理逻辑:

  1. const reducer = (state = initialState, action) => { 
  2.   switch (action.type) { 
  3.     case "INCREMENT"
  4.       return {...state, counter: state.counter + 1}; 
  5.     case "DECREMENT"
  6.       return {...state, counter: state.counter - 1}; 
  7.     case "ADD_NUMBER"
  8.       return {...state, counter: state.counter + action.number} 
  9.     default:  
  10.       return state; 
  11.   } 

注意,reducer是一个纯函数,不需要直接修改state

这样派发action之后,既可以通过store.subscribe监听store的变化,如下:

  1. store.subscribe(() => { 
  2.   console.log(store.getState()); 
  3. }) 

在React项目中,会搭配react-redux进行使用

完整代码如下:

  1. const redux = require('redux'); 
  2.  
  3. const initialState = { 
  4.   counter: 0 
  5.  
  6. // 创建reducer 
  7. const reducer = (state = initialState, action) => { 
  8.   switch (action.type) { 
  9.     case "INCREMENT"
  10.       return {...state, counter: state.counter + 1}; 
  11.     case "DECREMENT"
  12.       return {...state, counter: state.counter - 1}; 
  13.     case "ADD_NUMBER"
  14.       return {...state, counter: state.counter + action.number} 
  15.     default:  
  16.       return state; 
  17.   } 
  18.  
  19. // 根据reducer创建store 
  20. const store = redux.createStore(reducer); 
  21.  
  22. store.subscribe(() => { 
  23.   console.log(store.getState()); 
  24. }) 
  25.  
  26. // 修改store中的state 
  27. store.dispatch({ 
  28.   type: "INCREMENT" 
  29. }) 
  30. // console.log(store.getState()); 
  31.  
  32. store.dispatch({ 
  33.   type: "DECREMENT" 
  34. }) 
  35. // console.log(store.getState()); 
  36.  
  37. store.dispatch({ 
  38.   type: "ADD_NUMBER"
  39.   number: 5 
  40. }) 
  41. // console.log(store.getState()); 

小结

  • createStore可以帮助创建 store
  • store.dispatch 帮助派发 action , action 会传递给 store
  • store.getState 这个方法可以帮助获取 store 里边所有的数据内容
  • store.subscrible 方法订阅 store 的改变,只要 store 发生改变, store.subscrible 这个函数接收的这个回调函数就会被执行

参考文献 

  • https://cn.redux.js.org/docs/introduction/
  • https://www.redux.org.cn/docs/basics/Actions.html
  • https://lulujianglab.com/posts/大白话解析 Redux 、 redux-thunk 、redux-saga 和 react-redux

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2020-07-03 17:20:07

Redux前端代码

2022-09-06 11:13:16

接口PipelineHandler

2021-08-09 07:47:40

Git面试版本

2021-11-25 10:18:42

RESTfulJava互联网

2020-12-01 08:47:36

Java异常开发

2020-06-12 15:50:56

options前端服务器

2023-10-25 12:51:28

Go调度器

2022-07-28 19:19:21

Zookeeper中心化架构

2021-07-19 07:55:24

Redux中间件原理

2021-09-16 07:52:18

算法应用场景

2022-10-09 15:18:31

SwaggerOpenAPI工具

2019-05-10 10:50:04

Spring AOPJDK动态代理CGLIB动态代理

2022-08-14 07:14:50

Kafka零拷贝

2021-11-02 22:04:58

模式

2021-11-10 07:47:49

组合模式场景

2021-08-16 08:33:26

git

2022-02-21 17:24:18

序列化对象存储

2021-11-03 14:10:28

工厂模式场景

2023-03-07 08:38:23

三次握手四次挥手服务端

2021-11-09 08:51:13

模式命令面试
点赞
收藏

51CTO技术栈公众号