React系列之Redux

比眉伴天荒 2024-03-26 11:25 74阅读 0赞

## 1 Redux概述 ##

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。[Redux中文文档][Redux]

Redux 和react没有必然关系，redux可以应用于各种框架，包括jquery，甚至js都可以使用redux，只不过redux和react更加搭配。redux也推出了专门应用于react的react-redux。

### Redux的设计初衷 ###

随着Javascript单页面开发日趋复杂，Javascript需要管理更多的state（状态）。这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。

Redux就是为了解决这个问题。

### Redux三大原则 ###

1.  **单一数据源**：整个应用的状态数据（state）存储在一颗object tree中，并且这个object tree只存在于唯一一个store中；
2.  **state是只读的**：唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象；
    
    > 强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了，就可以知道为什么变。action 就像是描述发生了什么的指示器。
3.  **使用纯函数来执行修改**：为了描述action如何改变state tree，需要编写reducers。
    
    > Reducer 只是一些纯函数，它将action和state串起来，接收先前的 state 和 action，并返回新的 state。

### 基础概念 ###

#### Action ####

Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 `store.dispatch()` 将 action 传到 store。举个栗子，添加一条TODO任务的action可能是这样的：

{
        
        type: "ADD_TODO",
        text: "Learn React Redux"
    }

我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

#### Reducer ####

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state：`(previousState, action) => newState`。

下面以TODO List应用为例，给出一个reducer的实现代码：

function todoApp(state = initialState, action) {
        
      switch (action.type) {
        
        case SET_VISIBILITY_FILTER:
          return Object.assign({
        }, state, {
        
            visibilityFilter: action.filter
          })
        default:
          // 遇到未知的 action 时，一定要返回旧的 state
          return state
      }
    }

**注意**：不要修改 state。 使用 `Object.assign()` 新建了一个副本。不能这样使用 `Object.assign(state, { visibilityFilter: action.filter })`，**因为它会改变第一个参数的值**。你必须把第一个参数设置为空对象。你也可以开启对ES7提案对象展开运算符的支持, 从而使用 \{ …state, …newState \} 达到相同的目的。

#### Store ####

Store 有以下职责：

*  维持应用的 state；
 *  提供 getState() 方法获取 state；
 *  提供 dispatch(action) 方法更新 state；
 *  通过 subscribe(listener) 注册监听器;
 *  通过 subscribe(listener) 返回的函数注销监听器。

### 一个完整的示例：TODO List ###

你可以查看[这篇文章][Link 1]阅读TODO List的完整示例代码。

## 2 React Redux ##

再次强调：Redux和React之间没有任何关系，Redux支持React、Angular、jQuery甚至是Javascript，只是redux和react更加搭配。

react-redux是Redux官方出的，用于配合React的绑定库。react-redux能够使你的React组件从Redux store中很方便的读取数据，并且向store中分发actions从而更新数据。  
![在这里插入图片描述][d630b0c7bffb4a3baae033c2fe7591ba.png]

### React Redux中两个重要的成员 ###

react-redux中有两个重要的部分：Provider和connect

*  Provider能够使整个app都能获取到store中的数据
 *  connect方法能够使组件跟store进行关联

#### Provider ####

Provider包裹在根组件最外层，使得所有的子组件都可以拿到state。Provider接受store作为props，然后通过context向下传递，这样react中任何组件都可以通过context获取到store。

import React from 'react'
    import ReactDOM from 'react-dom/client'
    
    import {
         Provider } from 'react-redux'
    import store from './store'
    
    import App from './App'
    
    // As of React 18
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
      <Provider store={
        store}>
        <App />
      </Provider>
    )

#### connect ####

connect方便组件获取到store中的state。

[Redux]: https://www.redux.org.cn/
[Link 1]: https://www.redux.org.cn/docs/basics/ExampleTodoList.html
[d630b0c7bffb4a3baae033c2fe7591ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/97d3eaed2b46450a823529d15dcc9a2b.png