一文快速上手 Redux

最新推荐文章于 2024-03-07 15:39:30 发布
最新推荐文章于 2024-03-07 15:39:30 发布
阅读量294 收藏 1
点赞数 4
分类专栏： # React 文章标签： javascript react redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42938619/article/details/117141092
版权
本文是Redux基础教程的快速概述，介绍了Redux的核心概念：单个不可变状态树、使用Action描述状态变化以及纯函数Reducer实现状态更新。文中通过Counter案例详细解释了如何创建和使用Reducer，以及如何结合React实现状态管理。同时，还展示了从零开始实现一个简单的Store。
摘要由CSDN通过智能技术生成

一文快速上手 Redux

来自 Redux 官网 上列的基础教程之一，是 egghead.io 上的，视频网址 境内能够打开，笔记在 github 上也有。

这里只节选了部分内容，旨在学完了之后就能直接用 store, action 和 reducer 的功能。

Redux 内容提炼

  • Redux 只有一个不可变的状态树

  • action 用来描述 Redux 的状态变化

  • reducer 去实现 Redux 的状态变化

  • dispatch 用于触发 action 去调度对应的 reducer 去对状态树进行更改

  • Redux 的状态树是不可变的，每次 reducer 实现后都会返回一个新的状态树

  • counter 的效果图：

    redux-counter

视频笔记

The Single Immutable State Tree

即 Redux 自身有 一个 核心的不可变状态树。

Describing State Changes with Actions

字面意思是使用 actions 来描述 Redux 的状态变化。

这描述的是 Redux 的另一个特性，无法被直接修改或写入数据，唯一能够改变状态树的方法是发送一个 action 去改变 Redux 的状态树。

英文的文档里描述这个行为为：dispatch an action.

一个 action 是一个 JavaScript 的对象，它用来描述想要发送的变化，必须要有一个属性：类型，类型多用字符串做为值，因为字符串可以被序列化。

{
  // 必须要有 type 属性
  type: "INCREMENT";
}

仅有类型属性是不够的，在开发情况下会提供一些额外的数据用来描述这个 action 应该做什么。

以将商品加入购物车为例，仅仅有 加入购物车 这个行为描述是不够的，至少还需要有商品 id：

{
    type: "ADD_TO_CART",
    productId: 123456
}

Pure and Impure Functions

即纯函数与非纯函数。

纯函数是不会引起任何副作用，并且不会操作传来的参数的函数，它接收值，返回操作过的值对应值让别的函数使用。并且，无论调用多少次，纯函数所返回的结果始终如一，具有幂等性：

// pure function
function square(x) {
  return x ** 2;
}

非纯函数时会造成副作用，例如说数据库或是网络方面的，的函数：

function updateValue(id, val) {
  let updatedValue = val;
  // 其他的操作
  updatedValue = "some calculated value";
  updateDB(id, someVal);
}

下一次调用这个函数的时候，是无法保证函数会返回同一个值。

Reducer Function

Redux 中的 Reducer 就是一个纯函数，它接收上一个状态，从 action 中传过来的类型，然后返回一个新的状态。

小结 1

Redux 具有三个特性：

  • 只有一个不可变的状态树
  • 使用 actions 去描述状态变化
  • 使用 纯函数 reducers 去修改状态变化

案例 1，写一个 Counter Reducer 及其测试

const counter = (state = 0, action) => {
  // ES6 新特性 state = 0 重置了下面这段代码
  //   if (typeof state === "undefined") {
  //     return 0;
  //   }

  if (action.type === "INCREMENT") {
    return state + 1;
  } else if (action.type === "DECREMENT") {
    return state - 1;
  }
  return state;
};

console.assert(counter(0, { type: "INCREMENT" }) === 1);
console.assert(counter(2, { type: "DECREMENT" }) === 1);
console.assert(counter(undefined, { type: "INCREMENT" }) === 1);
console.assert(counter(10, { type: "NON_EXISTED_TYPE" }) === 10);

store 函数：getState(), dispatch(), subscribe()

  • getState(), 返回当前的状态(state)
  • dispatch(), 发送一个 action 去修改状态
  • subscribe(), 注册一个回到函数到 redux store 上，当 action 被发送时就会被调用

案例

JavaScript 代码：

const counter = (state = 0, action) => {
  // 用 switch 代替 if/else
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

// HTML中调用了Redux的CDN
const { createStore } = Redux;

const store = createStore(counter);

const render = () => {
  document.body.innerHTML = store.getState();
};

store.subscribe(() => {
  render();
});
render();

document.addEventListener("click", () => {
  store.dispatch({ type: "INCREMENT" });
});

HTML 部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/redux@4.1.0/dist/redux.js"></script>
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <script src="./reducer.js"></script>
  </body>
</html>

Implementing Store from Scratch

从零开始实现一个 store，具体实现为：

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach((listener) => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  };

  dispatch({}); // dummy dispatch

  return { getState, dispatch, subscribe };
};

从 store()函数 的介绍部分可以得知 store()函数有以下几个特性：

  • 接收 reducers 作为参数
  • store()函数 会返回有 getState(), dispatch(), subscribe() 三个函数的对象，分别有返回当前状态、发送 actions 和订阅的功能

鉴于 subscribe()函数 能被调用多次，所以在实践中使用了数组去保存所有变化的监听器。每一次 subscribe()函数 被调用，被调用的监听器就会被推进数组中。

如之前提到的，调用 action 是唯一一个能够改变 redux 内部状态的方法，因此在 dispatch函数 中需要调用对应的 reducer 去重新计算和更新状态。在状态被更新后，需要通过调用监听器去通知所有变化过的监听器。

在所有的监听器被调用后，就需要取消订阅相应的监听器，这也是 filter()函数 被调用的原因，通过从数组中移除监听器的方法去取消订阅已经被调用过的监听器。

返回一个空的对象，我的理解是为了第一次创建对象时去调用一次 reducer，让它返回初始状态。

React Counter 案例

注意，因为案例中使用了 JSX 语法糖，因此需要在 HTML 文档中添加 babel 预编译，此时完整的 HTML 如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/redux@4.1.0/dist/redux.js"></script>
    <script
      src="https://unpkg.com/react@17/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <div class="root" id="root"></div>
    <script src="./reducer.js" type="text/babel"></script>
  </body>
</html>

如果不想添加 babel 预编译的话，也可以到 babel repl 上将 JSX 语法糖手动编译成 ES5 的 JavaScript。

JS 部分的代码是这样的：

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

const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
);

const { createStore } = Redux;
const store = createStore(counter);

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() =>
        store.dispatch({
          type: "INCREMENT",
        })
      }
      onDecrement={() =>
        store.dispatch({
          type: "DECREMENT",
        })
      }
    />,
    document.getElementById("root")
  );
};

store.subscribe(() => {
  render();
});
render();

其中，counter 的 reducer 还是最早实现的样子，createStore(counter) 部分创建实例也是上面讲过的内容，唯一新增的部分是将 DOM 的操作由原生的 JavaScript 改为了 React。

对于 React 创建的组件 <Counter /> 来说，value 就是当前 Redux 中的状态，也就是经过操作后的数值，onIncrement 和 onDecrement 是随着 DOM 事件触发的 action。

而 const Counter = (...) => {...} 这一段语法是一个纯函数，它只负责接受传来的参数，并且将其呈现在页面上。

最后，subscribe() 函数订阅了 render()函数，因此每一次 Redux 的状态发生改变，它就会调用 render函数，重新对页面进行渲染。

GoldenaArcher
关注
专栏目录
Flutter之Redux框架原理解析
菜鸟博客
06-29 506
Flutter之Redux入门一文简单的介绍了Redux的使用方法，Redux在Flutter中可以用来状态分享来使用。现在就来简单分析下其原理。其实原理很简单，涉及到的文件就两个，如下图： redux的核心逻辑都在store.dart这个文件里面。可以用下图来描述Redux的核心工作流程。对这个图不了解的话，暂时没关系，本文会一点点剖析。 不考虑Flutter的话，纯粹在Dart里面使用Redux总共有如下三个步骤： 1、创建Reducer函数 在这里定有了两个action，一个是++action，一
6.react basic Redux 公共状态管理工具
最新发布
weixin_63029264的博客
03-22 280
useDispatch ：通过调用获取dispatch方法 ，用来触发导入的 reducer 函数进行修改state。useSelector ： 获取store中的所有模块，并通过模块解构出state变量。Redux就是React的公共状态管理。作用相当于Vue的pinia和Vuex。下载Redux依赖和Redux配套工具。可以独立运行，不用基于框架和工具。至此即可完成Redux的使用！
cdn 引入redux，一步步打印学习redux
cofecode的博客
08-10 985
我们用cdn 的方法引入redux 首先我们要知道redux是基于单向数据流的，里面有三大核心 action reducer store store是存储数据的地方。 在redux里，store值是不能随意修改的。修改state是通过reducer来完成。 具体来说，就是调用store.dispatch() 方法，然后经reducer返回新的state。 dispatch() 方法里面传...
Redux 学习(1) ----- Redux介绍
weixin_30367543的博客
11-16 73
Redux 有三个基本的原则： 　　1，单一状态树，redux 只使用一个javascript 对象来保存整个应用的状态。 状态树样式如下： const state = { count: 0 } 　　2，状态是只读的，它的意思不是说不能修改state，如果不能修改状态，那页面就完成静态化了，没有什么作用了，它想表达的是，我们不能直接修改state。修改state的唯一办...
Redux学习之路（一）Redux三原则、createSore原理及实现
cos的博客
02-15 1217
Redux三原则和Redux中的Reducer、（getState、dispatch、subscribe）以及createStore的原理及实现，并且实现了一个简易的计数器。看完基本上对Redux就有了一个大致的了解
redux概念、基础
couch potato的博客
11-11 221
Redux的特点 统一的状态管理，一个应用中只有一个仓库（store） 仓库中管理了一个状态树（statetree） 仓库不能直接修改，修改只能通过派发器（dispatch）派发一个动作（action） 更新state的逻辑封装到reducer中 参考链接： https://www.jianshu.com/p/786e7174b0c2 https://www.redux.org.cn/docs...
Redux | 一文带你快速上手
delete_you的博客
03-19 335
一文了解redux主要功能及其对应模板配置
一文搞定react中redux状态管理及使用，redux、reduxjs/toolkit、redux-persist持久化入门
qq_38188228的博客
03-07 1915
React Redux是React官方提供的Redux绑定库，它提供了一些方便的方法来连接React组件和Redux store。React Redux中文文档Redux Toolkit是一个Redux工具包，它提供了一组方便的方法来简化Redux的开发。Redux Toolkit官方文档redux-persist是一个Redux持久化库，它允许你将Redux store的状态保存到本地存储中，并在需要时将其恢复。redux-persist文档。
react-redux 使用小结
GoldenaArcher的博客
11-27 458
好久没写 Redux 了，最近老板让写一个 POC 去把现在的 usecase+repo 的结构转成 redux，所以就……toolkit 内部会进行监听，如果察觉到状态被修改了，那么 toolkit 内部会创建一个新的状态并进行返回。redux 的状态是不可变的，因此在使用老版的操作就需要返回一个新的状态，而不能直接修改原有的状态。，如果项目比较老的话，没有用最新版本的 react-redux 和 redux，就得用。找了一下资料，突然发现之前的写法已经落伍了……不需要额外设立一个变量去监听对应的。
React进阶(3)-上手实践Redux-如何改变store中的数据
itclanCoder
11-11 2147
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊（祝今日天下有情人终成兄妹)撰文| 川川VX-ID:suibichuanji什么?文章内容不够看,等等..点击文末左下方阅读原文,可看视频学习 前言在前面的一文当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的...
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
cYang2030的博客
12-09 5951
本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者 前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。 给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。 废话不多说，下面分类展开来说，收藏.
2020年前端面试复习必读文章【超百篇文章赠复习导图】，移动开发工程师的发展路线
m0_64319112的博客
11-29 371
重新认识构造函数、原型和原型链 JavaScript深入之从原型到原型链 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三） JavaScript 引擎基础：原型优化 Prototypes in JavaScript JavaScript深入之创建对象的多种方式以及优缺点 详解JS原型链与继承 从__proto__和prototype来深入理解JS对象和原型链 代码复用模式.
2020年前端面试复习必读精选文章，必看!!
webqianduan1的博客
07-06 2937
建议收藏文章，结合复习导图食用，效果更佳。 1. JavaScript 基础 1.1 执行上下文/作用域链/闭包 理解 JavaScript 中的执行上下文和执行栈 JavaScript深入之执行上下文栈 一道js面试题引发的思考 JavaScript深入之词法作用域和动态作用域 JavaScript深入之作用域链 发现 JavaScript 中闭包的强大威力 JavaScript闭包的底层运行机制 我从来不理解JavaScript闭包，直到有人这样向我解释它... ..
[React 基础系列] 状态 & 状态更新 & 生命周期方法
GoldenaArcher的博客
08-03 3576
这一期复习一下 状态(state) 和 生命周期(lifecycle)，这一节主要针对的内容是 类组件 中的状态与生命周期，钩子函数(hooks) 中的实现会放在 hooks 中学习。 通过这章的学习，你应该能学会： 如何设置状态 如何 this.setState() 更新状态 常用的几个生命周期方法
[React 进阶系列] React Context 案例学习：子组件内更新父组件的状态
GoldenaArcher的博客
04-12 2786
React Context 案例学习：子组件内更新父组件的状态 一直知道 React Context 是 React 内部实现状态管理的方法，也简单的跟着官方的案例敲了一下使用 Context 进行的渲染，不过始终因为 子组件中更新父组件父组件 这一方法的实现太过麻烦，最终还是决定使用 Redux——毕竟 Redux 虽然内部实现依靠的是 Context，但是它已经封装好了。不过最近还是想要深入的学习一下 React，也就包括其状态管理机制，正好学到一个非常干净的写法，也就借此写一篇笔记。 基础的 Cont
[React 基础系列] 什么是 JSX，以及如何使用 JSX
GoldenaArcher的博客
07-14 2224
[React 基础系列] 什么是 JSX，以及如何使用 JSX什么是 JSX表达式JSX 嵌入表达式在 JSX 使用函数JSX 作为表达式以三元表达返回 JSXJSX 与对象属性子组件注入攻击 React 是由 facebook 开发、开源并维护的一个库，而 React 的意义是在于使用 JavaScript 去实现用户交互——a JavaScript library for building user interfaces。 所以，本质上来说，React 是一个 库，而且它的作用是使用 JavaScrip
React Router DOM 升级到 v6 后的一些报错信息
GoldenaArcher的博客
04-23 2187
React Router DOM 升级到 v6 后的一些报错信息 之前在 React Router 的基本应用 讲了一下 react-router-dom 的一些基础用法。虽然那篇笔记写于去年，但是 react-router-dom 中有一些 breaking changes 导致原本的 API 已经被弃用。如果使用 npm i react-router-dom@5 的话，那么那篇笔记还是适用的，不过如果默认下载最新版本，那么程序就会抛出异常从而跑不起来。 报错 1：‘Switch’ is not expo
swr，解决 React 项目 API 调用的最好方案
GoldenaArcher的博客
04-19 2120
swr，解决 React 项目 API 调用的最好方案 搜了一圈，感觉 swr 源码学习的文章不少，但是好像使用方面的确实有限，所以…… 目前体感是觉得使用 swr 会比 redux-saga 要舒服一些，首先代码量小很多，其次同步异步方面的操作也更加简洁明了。swr 对各种 API 调用的支持也很好，官方文档还有包括 Axios 和 GraphQL 的配置，总体来说应该是最近使用的一些包中，最能够解决 React 项目中 API 调用的库了。 swr 是 stale-while-revalidate 的缩
Taro集成Redux：快速入门与示例
本文档详细介绍了如何在Taro框架中快速集成和使用Redux来实现高效的状态管理。Taro是一个由京东凹凸实验室开发的多端开发框架，它允许开发者使用React语法编写代码，并生成兼容微信小程序、H5、快应用和RN等多种平台...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值