深入理解redux之reducer为什么是纯函数

最新推荐文章于 2024-07-18 13:11:52 发布
最新推荐文章于 2024-07-18 13:11:52 发布
阅读量3.5k 收藏 10
点赞数 2
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5cd0c5f16fb9a032106be1ef
版权
本文探讨了Redux中Reducer必须是纯函数的原因，包括保持状态管理可预测性、支持时间旅行调试以及与React组件更新机制的关系。文中详细解释了纯函数的三个条件，并指出在Reducer中执行修改参数、调用非纯函数或有副作用操作的后果。最后，介绍了如何在Redux中正确执行API请求的方法。
摘要由CSDN通过智能技术生成

reducer是redux的三个核心概念之一，它指定了应用状态的变化如何响应 actions 并发送到 store，需要由开发人员自己定义，提起reducer，最常想到的一个准则是reducer要是纯函数，那么这其中是什么原因呢，如果不是纯函数的话会导致redux不可用吗？接下来就来一步步分析下这个问题

reducer响应actions的原理

  我们定义的reducer负责接收action，并返回一个新的state，但在react组件开发中，我们也仅仅定义了而从未实际调用过reducer，所有reducer作用的原理是什么呢？

  实际上，组件中我们会手动调用dispatch方法发送action来响应事件，而这里的发送action不止发送action那么简单，还包括了调用reducer，更新状态为reducer的处理结果，触发订阅事件等一系列操作，都是在dispatch的方法内实现的，到这里可以来通过源码的处理流程来了解一些这个过程~

function dispatch(action) {
    ...
    try {
      //将flag置为true,表明处于分发逻辑中
      isDispatching = true 
      
      //currentReducer即为传入的reducer函数，这里会自动调用currentReducer函数，并将返回值赋给currentState
最低0.47元/天 解锁文章
weixin_34056162
关注
redux Reducer
qq_45429539的博客
03-03 271
Reducer Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的 设计 State 结构 以 todo 应用为例，需要保存两种不同的数据： 当前选中的任务过滤条件； 完整的任务列表。 { visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all
redux之reducer 为什么必须是纯函数？
瓜皮伦的博客
07-16 158
在 Redux store 中保存了 reducer 返回的 这个 state，这个新的 store 树就是应用的下一个 state, 所有订阅 store.subscribe(listener)的监听器都将被调用，监听器里可以调用 store.getState()获得当前 state 此时，我们就可以使用新的 state 来更新 UI setState(newState)如果 reducer 不是纯函数会发生什么？我们将上面代码reducer改造一下,直接修改 state，而不是返回新的 state。
Redux中的Reducer：核心与灵魂
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-18 1063
Reducer是Redux中一个纯函数，它接收当前的状态(state)和一个动作(action)，然后返回一个新的状态。这里的“纯”意味着对于相同的输入，Reducer总是会返回相同的结果，且不会产生任何副作用，如修改外部状态或调用外部API。Redux推崇“单一事实源”的理念，即所有的状态都在Redux Store中集中存储，而Reducer就是连接动作和状态之间的桥梁。Redux的Reducer教会我们，即使是看似简单的设计模式，也能在恰当的场景下发挥巨大的威力。一边打入敌人内部一边持续提升自己。
为什么Redux需要reducer成为“纯函数”
cumi6497的博客
07-10 394
by rajaraodv 通过rajaraodv 为什么Redux需要reducer成为“纯函数” (Why Redux need reducers to be “pure functions”) You may have heard that Redux depends on “pure functions” from functional programming. Well, what e...
【offer 收割计划】你知道为什么 reducer 最好是一个纯函数吗？
小丞同学
12-11 1249
前端面试经典题目，这几道题你能拿捏吗？来看看你会几道，redux 中的 reducer 为什么需要设计成纯函数呢？
Redux - Reducer 纯函数和拆分
这里是博客简介，你应该进到创作中心，在最底下的“博客设置”中修改。
06-02 389
1. Reducer的纯函数原则和时间旅行 Reducer一定要是纯函数，所谓纯函数，即就是只要函数的 调用参数相同，就永远返回相同的结果。一个纯函数，它返回的结果 往往是可以根据参数精确预测的。 要实现纯函数，只要做到： 不修改入参 不执行有副作用的操作（修改函数之外的其他变量、API调用等） 不调用其他非纯函数（Date.now()） 保证纯函数的原则，则每当我们dispatch一个相同的action，且初状态相同，则 总是能得到一个相同的结果（状态变化），因此可以实现redux的时间旅行功能。 2
浅尝辄止，React是如何工作的
weixin_33937499的博客
08-22 212
大神们可以写出“深入浅出”系列，小白就写点"真·浅尝辄止"系列的吧，主要便于自己理解和巩固，毕竟一开始就上源码还是会头大滴，于是就准备浅尝辄止的了解下"React是如何工作的？" React是怎么工作的？ 你知道Diff算法吗 ---xx面试官 小白的前端排坑指南： 1.VK的秋招前端奇遇记(一) 2.VK的秋招前端奇遇记(二) 3.VK的秋招前端奇遇记(三) 4.番外篇：前端面试&a...
redux中reducer 为什么最好是纯函数.md
12-20
redux中reducer 为什么最好是纯函数.md
redux-reducer-v-000
02-19
减速器应该是纯函数。 编写一个需要采取措施（有效载荷）的减速器。 概述 每年，尤其是在假期前后，我们会忘记需要为谁购买礼物的人。 让我们编写一个函数来帮助我们管理礼物接收者列表。 我们应该能够添加一个...
【React】redux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数
YK菌的博客
06-18 1237
redux
react（55）——reducer函数必须为一个纯函数，否则react不会重新渲染
木子 旭的博客
03-24 431
1.什么是纯函数 一个纯函数函数，输入同样的参数会得到同样的返回值。 不会产生任何的副作用，如网络请求，输入和输出设备。 不能调用Date.now()方法或者Math.random()等不纯的方法。 不能改变参数的值 2.不是纯函数的例子 //这样就不是一个纯函数，输入相同的值会返回不同的值 func(a){ return Math.random(); } //这样就也不是一个纯函数, func(a){ a = 18; return a; } ……………… 3.redux中的red
从redux的纯函数到函数式编程
chenxie1213的博客
05-26 210
本文作者：ivweb 王少飞 原文出处：IVWEB社区 未经同意，禁止转载 在做业务时我们用react+redux框架，其中redux的reducers是用的纯函数。这里什么是纯函数？为什么要用纯函数？纯函数的好处是什么？接下来的我们一起研究下。 redux强调reducers一定要...
redux中的reducer为什么必须（最好）是纯函数
weixin_30707875的博客
07-27 310
为什么reducer最好是纯函数？ 首先你得看看文档怎么说reducer的作用的，‘接收旧的 state 和 action，返回新的 state’，他起的是一个对数据做简单处理后返回state的作用。 为什么只起这个作用？ 因为redux把reducer设计成只负责这个作用，所以reducer的职责不允许有副作用，副作用简单来说就是不确定性，如果reducer有副作用，那么返回的s...
什么叫纯函数？
Lee_taotao的博客
01-14 3780
纯函数：就是一个函数的返回结果只依赖于它的参数，并且在执行过程中没有副作用，我们就把这个函数叫做纯函数。 重点： 函数的返回结果只依赖于它的参数 // 不是纯函数，依赖了外部变量a var a = 1 function add(b) { return a+b } add(1) // 2 // 是纯函数 function add(a, b) { return a+b } add(1, ...
【前端学习】React学习笔记-redux、纯函数、打包
SDUzzy的博客
03-28 1366
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 简介 redux是什么 redux是一个专门用于状态管理的JS库（不是react插件库） 它可以用在react，angular，vue等项目中，但基本与react配合使用。 作用：集中式管理react应用中多个组件共享的状态 redux在什么情况下使用 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组建的状态（通信） 总体原则：能不用就不用，除非比较难以实现的时候再用。 redux的三个核心概念 a
Reducer 为什么必须是纯函数？
weixin_34236869的博客
12-02 1971
前言 本文不讲 react、redux、action、reducer 的具体应用，只是单纯的讲解 reducer 为什么必须是纯函数，本文适合有一定 redux 开发经验的同学。 用过 react 的同学对 redux 一定不会陌生，我们知道 redux 可以提供可预测化的状态管理。在一个应用中，所有的 state 都是以一个对象树的形式存在一个单一的 store 中，唯一改变 state 的办...
纯函数编程和Redux架构简述
qq_42568693的博客
02-09 357
纯函数编程和Redux架构简述纯函数Redux架构 纯函数 将app的运行机制向状态机靠近，根据不同的参数返回某种具体的结果，其中函数仅仅复制参数的值， 而不引用（C语言中值传递而不是指针传递） Redux架构 入口是一个“默认的state”，这个state被传递给func1(state, action?) -> newState, 然后这个newState被传递给func2 (state)...
Redux Reducer
YYece的博客
10-29 395
什么是Reducer Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。 action只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。 reducer就是一个纯函数（Pure Function），接受就得state和action，返回新的state (previousState, action) => newState 之所以将这...
redux和reducer
11-30
Redux是一个用于JavaScript应用程序的可预测状态容器，它可以帮助我们更好地管理应用程序的状态。而Reducer是Redux中用于处理状态变化的函数，它接收先前的状态和一个动作对象作为参数，并返回新的状态。Reducer的设计灵感来自于JavaScript中的Array.prototype.reduce()方法，因为它们都是将先前的值和当前的值组合成一个新值的过程。在Redux中，Reducer通常是纯函数，它们不会修改先前的状态，而是返回一个新的状态对象。 下面是一个简单的Redux应用程序，其中包含一个Reducer： ```javascript // 定义初始状态 const initialState = { count: 0 }; // 定义Reducer function counterReducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } // 创建Redux store const { createStore } = Redux; const store = createStore(counterReducer); // 订阅状态变化 store.subscribe(() => { console.log(store.getState()); }); // 分发动作 store.dispatch({ type: 'INCREMENT' }); // 输出：{ count: 1 } store.dispatch({ type: 'INCREMENT' }); // 输出：{ count: 2 } store.dispatch({ type: 'DECREMENT' }); // 输出：{ count: 1 } ``` 在上面的例子中，我们定义了一个名为`counterReducer`的Reducer函数，它接收先前的状态和一个动作对象作为参数，并返回一个新的状态对象。我们还创建了一个Redux store，并将`counterReducer`作为参数传递给`createStore`函数。最后，我们分发了一些动作，并在控制台中打印了状态变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值