【React系列】Redux(一)管理状态

川峰

已于 2024-01-04 13:35:19 修改

阅读量1.1k

点赞数 20

分类专栏： React 文章标签： React Redux 状态管理

于 2024-01-02 19:32:20 首次发布

本文链接：https://blog.csdn.net/lyabc123456/article/details/135347070

版权

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

在React的开发过程中，Redux对于我们是非常重要的。
但是对于很多人来说，初次接触redux会感觉redux的学习坡度非常陡峭，难度比较大。
在接下来，我会通过一个系列的方式循循渐进、层层深入的方式来讲解Redux：从redux的独立使用过程、到redux的结构划分、到redux结合react的过程、到redux中异步操作、到复杂数据的结构处理、到结合immutable的使用。
整个过程，都是在现有知识的基础之上层层递增、一步步掌握redux的使用！

一. 认识Redux

1.1. JavaScript纯函数

函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；

在React中，纯函数的概念非常重要，在接下来我们学习的Redux中也非常重要，所以我们有必须来回顾（如果你之前没有学过，那么你就是学习）一下纯函数。

纯函数的维基百科定义：

在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：

此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

当然上面的定义会过于的晦涩，所以我简单总结一下：

确定的输入，一定会产生确定的输出；
函数在执行过程中，不能产生副作用；

那么我们来看几个函数是否是纯函数：

案例一：

function sum(num1, num2) {
   
  return num1 + num2;
}

很明显，上面的函数是一个纯函数；
它的输出是依赖我们的输入内容，并且中间没有产生任何副作用；

案例二：

let foo = 5;

function add(num) {
   
  return foo + num;
}

console.log(add(5));
foo = 10;
console.log(add(5));

add函数不是一个纯函数；
函数依赖一个外部的变量，变量发生改变时，会影响：确定的输入，产生确定的输出；
能否改进成纯函数呢？const foo = 5; 即可

案例三：

function printInfo(info) {
   
  console.log(info.name, info.age);
  info.name = "哈哈哈";
}

printInfo不是一个纯函数；
虽然无论输入什么，最终输出都是undefined，但是它产生了副作用，修改了传入的对象；

当然纯函数还有很多的变种，但是我们只需要理解它的核心就可以了。

为什么纯函数在函数式编程中非常重要呢？

因为你可以安心的写和安心的用；
你在写的时候保证了函数的纯度，只是实现自己的业务逻辑即可，不需要关心传入的内容或者依赖其他的外部变量；
你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；

React 非常灵活，但它也有一个严格的规则：

所有的 React 组件（无论是函数组件还是class声明的组件），都必须像纯函数一样，保护它们的props不被修改。

在之后学习redux中，reducer也被要求是一个纯函数。

1.2. 认识Redux

1.2.1. 为什么需要redux？

JavaScript开发的应用程序，已经变得越来越复杂了：

JavaScript需要管理的状态越来越多，越来越复杂；
这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；

管理不断变化的state是非常困难的：

状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；
当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；

React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：

无论是组件定义自己的state，还是组件之间的通信通过props进行传递；也包括通过Context进行数据之间的共享；
React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定；

在这里插入图片描述

Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理；

Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）

1.2.2. redux的核心理念

Redux的核心理念非常简单。

比如我们有一个朋友列表需要管理：

const initialState = {
   
  friends: [
    {
    name: "why", age: 18 },
    {
    name: "kobe", age: 40 },
    {
    name: "lilei", age: 30 },
  ]
};

如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的；

比如页面的某处通过friends.push的方式增加了一条数据；
比如另一个页面通过friends[0].age = 25修改了一条数据；
整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化；

Redux要求我们通过action来更新数据：

所有数据的变化，必须通过派发（dispatch）action来更新；
action是一个普通的JavaScript对象，用来描述这次更新的type和content；

比如下面就是几个更新friends的action：

const action1 = {
    type: "ADD_FRIEND", info: {
    name: "lucy", age: 20 } }
const action2 = {
    type: "INC_AGE", index: 0 }
const action3 = {
    type: "CHANGE_NAME", playload: {
    index: 0, newName: "coderwhy" } }

强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；
当然，目前我们的action是固定的对象，真实应用中，我们会通过函数来定义，返回一个action；

但是如何将state和action联系在一起呢？答案就是reducer

reducer是一个纯函数；
reducer做的事情就是将传入的state和action结合起来生成一个新的state；

function reducer(state = initialState, action) {
   
  switch (action.type) {
   
    case "ADD_FRIEND":
      return {
    ...state, friends: [...state.friends, action.info] }
    case "INC_AGE":
      return {
   
        ...state, friends: state.friends.map((item, index) => {
   
          if (index === action.index) {
   
            return {
    ...item, age: item.age + 1 }
          }
          return item;
        })
      }
    case "CHANGE_NAME":
      return {
   
        ...state, friends: state.friends.map((item, index) => {
   
          if (index === action.index) {
   
            return {
    ...item, name: action.newName }
          }
          return item;
        })