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

àì夳堔傛蜴生んèń 2022-08-29 14:55 156阅读 0赞

![eb17e861cdac1a1f2f0f52b68ce78626.png][]

## 一、是什么 ##

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

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

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

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

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

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

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

## 二、工作原理 ##

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

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

工作流程图如下所示：

![682cddab5f613c0bc258581433c2a42b.png][]

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

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

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

## 三、如何使用 ##

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

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

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

// 设置默认值
    const initialState = {
      counter: 0
    }
    
    const reducer = (state = initialState, action) => {
    }

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

const store = createStore(reducer)

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

console.log(store.getState());

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

store.dispatch({
      type: "INCREMENT"
    })
    
    store.dispath({
      type: "DECREMENT"
    })
    
    store.dispatch({
      type: "ADD_NUMBER",
      number: 5
    })

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

const reducer = (state = initialState, action) => {
      switch (action.type) {
        case "INCREMENT":
          return {...state, counter: state.counter + 1};
        case "DECREMENT":
          return {...state, counter: state.counter - 1};
        case "ADD_NUMBER":
          return {...state, counter: state.counter + action.number}
        default: 
          return state;
      }
    }

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

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

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

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

完整代码如下：

const redux = require('redux');
    
    const initialState = {
      counter: 0
    }
    
    // 创建reducer
    const reducer = (state = initialState, action) => {
      switch (action.type) {
        case "INCREMENT":
          return {...state, counter: state.counter + 1};
        case "DECREMENT":
          return {...state, counter: state.counter - 1};
        case "ADD_NUMBER":
          return {...state, counter: state.counter + action.number}
        default: 
          return state;
      }
    }
    
    // 根据reducer创建store
    const store = redux.createStore(reducer);
    
    store.subscribe(() => {
      console.log(store.getState());
    })
    
    // 修改store中的state
    store.dispatch({
      type: "INCREMENT"
    })
    // console.log(store.getState());
    
    store.dispatch({
      type: "DECREMENT"
    })
    // console.log(store.getState());
    
    store.dispatch({
      type: "ADD_NUMBER",
      number: 5
    })
    // 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

\--The End--

系列正在更新：19/33

点击下方卡片解锁更多

![a5407cb416c0daef007e0f659375c9ed.png][]

创作不易，星标、点赞、在看 三连支持

[eb17e861cdac1a1f2f0f52b68ce78626.png]: /images/20220829/d7f269e534e34e80aa2dbcca84324f87.png
[682cddab5f613c0bc258581433c2a42b.png]: /images/20220829/3c33725ca7dc40d08219bc2f821ffba6.png
[a5407cb416c0daef007e0f659375c9ed.png]: /images/20220829/e45b076bc50b4648ae52a3533f566e58.png