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

一、是什么

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.   
  
  
  
  2. const store = createStore() // 创建数据的公共存储区域（管理员） 
    3.

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

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

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

 
 
 
 
    
  
  
  
  
  1. const store = createStore(reducer) 
    2.

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

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

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

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

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

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

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

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

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

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

完整代码如下：

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

小结

  • 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

新闻名称：说说你对Redux的理解？其工作原理？
地址分享：http://www.shufengxianlan.com/qtweb/news34/446084.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

同城分类信息

眉山电信机房　　 　谷歌推广　　 　商城网站建设公司　　 　电商网站建设方案　　 　网站营销推广　　 　电信内江机房　　 　成都二枢电信服务器托管　　 　成都网站设计　　 　成都花箱　　 　免备案虚拟主机空间　　 　帝美豪门窗　　 　雨棚定制　　 　西云机房　　 　重庆主机托管　　 　成都企业网站建设公司　　 　郫县门窗定制　　 　重庆网站建设　　 　成都装修公司　　 　手机网站建设套餐　　 　手机APP开发