首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

redux在这里是如何工作的,我正在看一个代码库,我不明白另一个函数下的函数是如何分配的。

Redux是一个用于JavaScript应用程序的状态管理库。它通过一个单一的全局状态树来管理应用程序的状态,并使用纯函数来处理状态的变化。Redux的工作原理可以分为三个主要部分:store、action和reducer。

  1. Store(存储):Redux中的store是应用程序的状态存储库。它包含了整个应用程序的状态,并提供了一些方法来访问和更新状态。通过调用Redux提供的createStore函数,我们可以创建一个store对象。
  2. Action(动作):Action是一个简单的JavaScript对象,用于描述状态的变化。它必须包含一个type属性,用于指示要执行的操作类型,以及一些可选的payload属性,用于传递额外的数据。当应用程序需要改变状态时,它会派发一个action。
  3. Reducer(归约器):Reducer是一个纯函数,用于根据action的类型来更新状态。它接收当前的状态和action作为参数,并返回一个新的状态。Reducer应该是一个纯函数,即给定相同的输入,它应该始终返回相同的输出,而不会产生任何副作用。在Redux中,可以通过combineReducers函数将多个reducer组合成一个根reducer。

当应用程序中的某个组件需要改变状态时,它会派发一个action到store。然后,store会将这个action传递给reducer,并根据action的类型来更新状态。最后,store会通知所有订阅了状态变化的组件,以便它们可以重新渲染并显示最新的状态。

对于你提到的另一个函数下的函数如何分配的问题,这可能涉及到Redux中的中间件。中间件是一个位于action派发和reducer之间的函数,它可以拦截和处理action,并在必要时进行一些额外的操作。通过使用中间件,我们可以实现一些复杂的逻辑,例如异步操作、日志记录和错误处理等。

在Redux中,常用的中间件是redux-thunk和redux-saga。redux-thunk允许我们在action中返回一个函数而不是一个简单的对象,这个函数可以进行异步操作,并在完成后派发真正的action。redux-saga则提供了一种基于Generator函数的方式来处理副作用,它可以更好地管理异步操作的流程和状态。

关于函数的分配,如果你在代码库中看到一个函数下的函数,可能是因为这个函数是一个闭包,它可以访问外部函数的变量和作用域。闭包可以用于创建私有变量和函数,或者在某些情况下实现柯里化和高阶函数等功能。

总结起来,Redux是一个用于JavaScript应用程序的状态管理库,通过store、action和reducer来管理状态的变化。中间件可以用于处理复杂的逻辑和异步操作。闭包可以用于创建私有变量和函数,或者实现柯里化和高阶函数等功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

翻译 | Thingking in Redux(如果你只了解MVC)

这篇文章没有介绍React-Native如何工作(因为那确实不是最难部分)。...从MVC“迁移”到Redux比较困难,但这里是做法: Actions = Controller 把你Actions想象成controller。...Redux数据流。人生变得糟透了。 Redux中事情有些不同。假如你有一个组件,然后你想在按钮被按时候做些事情。那么你该从何开始呢?...这么做: 定义你Action 定义你Reducer 在你Component中将Actions像props一样定义 把它们放到View上 下面个解释以上概念简单代码示例。...在这个例子中,将会展示如何编辑一个text input,然后当有用户按按键时它将会调用action来保存内容。

1.4K100

【React】211- 2019 React Redux 完全指南

99.999% 情况,当任何人在 React 场景提到 “Redux”,他们指的是这两个。...给 Reducer 一个初始状态 记住 reducer 职责接收当前 state 和一个 action 然后返回新 state。 它还有另一个职责:首次调用时候应该返回初始 state。...我们准备好把它连接到 React 了,在此之前让我们先谈谈这段 reducer 代码如何保持纯 Reducers 另一个关于 reducers 规则是它们必须函数。...就像一个规则工厂,甚至不知道那是什么。 是的,Redux 就像一个霸道父母。但它是出于爱。函数式编程爱。 Redux 建立不变性基础上,因为变化全局 state 一条通往废墟之路。...现在时候将 Redux 连接到 React 了。 要做到这一点,要用到 react-redux 两样东西:一个名为 Provider 组件和一个 connect 函数

4.2K20
  • 学习 redux 源码整体架构,深入理解 redux 及其中间件原理

    前言 你好,若川。这是学习源码整体架构系列第八篇。整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习代码整体结构,不深究其他不是主线具体函数实现。...调试 redux 源码准备工作 之前,知乎回答了一个问题若川:一年内前端看不懂前端框架源码怎么办?推荐了一些资料,阅读量还不错,大家有兴趣可以看看。...这时根路径,新建文件夹examples,把原生js写计数器redux/examples/counter-vanilla/index.html,复制到examples/index.html。...redux debugger图 图中右边Scope,有时需要关注,会显示闭包、全局环境、当前环境等变量,还可以显示函数等具体代码位置,能帮助自己理解代码。...所以返回next函数,他们串起来执行了,形成了中间件洋葱模型。人们都说一图胜千言。画了一个相对简单redux中间件原理图。 ?

    1.5K20

    怎样通过读源码提高你 JavaScript 知识

    你还记得自己第一次深入挖掘常用或框架代码情景吗?对而言,那一刻三年前作为前端开发人员第一份工作。 我们刚刚完成了用于创建在线课程内部遗留框架重写。...从那以后,对 JavaScript 了解以及一般编程方式得到了很大提高,花了很多时间深入研究每天工作种或在自己项目中使用本文中,将分享一些分析或框架方法。 ?...另一个好处增加你对良好应用架构理解。虽然大多数开源项目通常与其存储遵循相同结构,但每个项目都包含差异。...另一个令我感到惊讶好处:你可以更轻松地阅读官方 JavaScript 规范,该规范定义了语言工作方式。...形成一个假设,然后进行测试。 案例研究:Redux Connect 函数 React-Redux 一个用于管理 React 应用状态

    94720

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    组件本身就是 JavaScript 函数独立且可复用代码。 使用组件构建应用程序目的使其具有模块化架构,具有明确关注点分离。这使代码更易于理解、更易于维护并且可能情况更易于复用。...更新状态后读取状态正确方法使用 useEffect hook。它允许我们每个组件重新渲染后(默认情况)或在我们声明更改任何特定变量之后执行一个函数。...那么 ReduxRedux 一个已经存在很长时间并且 React 中被广泛使用。...Redux toolkit Redux toolkit 一个建立 Redux 之上,其目的去除 Redux 产生一些复杂性和模板。...Zustand Zusand 另一个为 React 构建开源状态管理

    8.5K20

    【React】945- 你真的用对 useEffect 了吗?

    1.什么useEffect? 该 Hook 接收一个包含命令式、且可能有副作用代码函数。...思路,先设置这个接口返回值为data=[], 等到数据再去请求另一个接口,即data作为useEffect第二个参数传入。 但是不知道为什么会造成死循环,拿不到我们想要结果。...如果你写过redux,那么将会对useReducer非常熟悉,可以把它理解为一个轻量额redux。useReducer 返回一个状态对象和一个可以改变状态对象dispatch函数。...复制代码如何使用 React 二进制设计模式示例 这里是 React 支持 hook effect,以及它们 tag 属性(详见源码): Default effect —— UnmountPassive...以及这里是 React 如何检查行为触发(详见源码): if ((effect.tag & unmountTag) !

    9.6K20

    Angular React Vue应该选择什么?

    为了推动这一点,这里是 Mahesh Chand 引述: 不是一个 JavaScript 开发人员。背景使用 “真正” 软件平台构建大型企业系统。...JSX 对于开发来说是一个很大优势,因为代码写在同一个地方,可以代码完成和编译时更好地检查工作成果。当你 JSX 中输入错误时,React 将不会编译,并打印输出错误行号。...框架和 Angular 一个框架而不是一个,因为它提供了关于如何构建应用程序强有力约束,并且还提供了更多开箱即用功能。...这里是文章引述: 对于我和我团队来说,代码可读性很重要,但编写代码很有趣也是非常重要实现真正简单计算器小部件时创建 6 个组件并不奇怪。...许多情况维护,修改或对某个小部件进行可视化检查方面也是不好,因为你需要绕过多个文件/函数并分别检查每个小块 HTML。

    2.9K20

    给AI打工!ChatGPT负责创作漫画,负责画出来,居然搞出超现实主义?

    不过,用语言描述一个画面妥妥,于是一场AI和人类合作就开始了,以下博主作为第一人称创作记录: 人类:创建一个有趣单面板漫画 ChatGPT:这是另一个单面板漫画: 一个简笔画小人坐在书桌前...ChatGPT:这是一个纽约客风格单幅漫画。 图片描述:一只狗公园里被主人遛狗。这只狗看着一尊希腊神像,雕像已经摇摇欲坠,还少了几块碎片。狗带着困惑表情。...人类:请换一个试试 ChatGPT:好啊!这是另一个《纽约客》风格单幅漫画: 图片描述:一只狗公园里被主人遛狗。这只狗正在看一个现代艺术雕塑,它是一个巨大金属立方体,有着锋利棱角。...这只狗正在看一个现代艺术雕塑,它是一个巨大金属立方体,有着锋利棱角。邮递员站在雕塑旁边,手里拿若一叠邮件,看上去很恼火。一只鸭子跟着邮递员,嘎嘎地叫着,拍打着翅膀。 说明:“不明白。...图片描述:一个站在一堵墙上写着“禁止入内”大墙前。他们提着行李箱,带着挫败表情望着墙壁。他们身后高楼林立、碧空如洗城市风景。

    1.2K30

    Immutable.js 到底值不值得用?

    导语 一个前端开发人员,拥有四年工作经验,目前一个大型软件团体里工作,制作一个以React框架和Redux为基础建立起来新单页程序。...Facebook公司一个开源软件。...这是通过react-redux模块“connect()”修饰函数来实现程序开发过程中,我们注意到了以下优点和缺点。...然而,和React之类框架比起来,Immutable文档极其不完整。 不清楚Immutable句法,或者代码无法像预想那样起作用时,开发人员都会求助于文档,不过常常是看了还不明白。...代码为什么不对?既然看了还不明白,最终大家都会使用终端日志console.log()大法。不过很可惜,用日志审查数据时会发现自己一直自定义数据类型属性里翻来翻去。

    2K50

    2016 JavaScript 技术栈展望

    Redux 中,大多数组件都是纯函数组件,也只有一个集中存储和资源中心。Redux 实例方法负责整个数据操作和维护。相比 Flux 来说,Redux 思路更加清晰。...通过观看这些视频,即可成为一个 Redux 方面的专家。曾经见识到一个零基础 React 团队短短几周内迅速开发出了测试版产品,且代码非常稳健和老练。...ESLint 另一个无可争议工具 ESLint。ESLint 支持 ES6 语法,还提供了 React 插件,已经不单单是一个代码审查工具了。... 4.x 版本中,Lodash 为偏爱函数式编程开发者提供了一个函数式开发”模式。 如果你熟悉函数式编程,你可以了解一 Ramda。...除非你正在维护一个陈旧项目或者用到第三方依赖了 jQuery,否则已经没有必要使用它了。 喜欢让项目保持简洁,代码中只使用 fetch 。

    2.1K40

    《彻底掌握redux》之开发一个任务管理平台

    项目技术选型和架构 基于react实现一个可用任务管理平台 如何实现自己js工具 正文 1. redux工作机制和基本概念 以上笔者画一个草图,描述了redux数据流转机制。...首先是用户触发action(代码层面只有dispatch才能触发action),这时store会自动调用reducer函数并传入上一个状态state和action,reducer函数会返回一个state...以下使用redux基本步骤,大家可以参考一: 定义初始化state 定义action 编写reducer函数 使用dispatch触发action 基本代码如下: // 1....异步action解决方案redux-thunk 了解异步action之前想先来聊聊redux中间件机制。...异步action本质上返回一个函数函数里面执行相关操作,但是普通action返回一个对象,那么如何去处理呢?

    1.1K30

    2021年React学习路线图

    相信“码上学习”,这个将帮你从 React 应用中立即开始。 它用几个默认文件搭建项目,让你直接开始编码,了解 React 怎么工作。...有了 Hooks,开发者可以函数组件中使用状态。 你应该知道如何使用最常见 Hooks,比如 setState 和 useEffect。...如果你刚开始学习 React,你应该从更简单东西开始。 React Query 另一个轻量级,经常被描述成“React 中看不见数据请求”。...你应该学习: 用 Redux 搭建一个项目 用 Redux 做数据获取和状态管理 可选,看一 Redux Thunk 一开始很难理解 Redux。...https://www.valentinog.com/blog/redux/ Redux Thunk 一个流行,经常与 Redux 一起使用。它允许操作创建者返回函数而不是操作对象。

    7.6K21

    谈谈 React 5种最流行状态管理

    当我学习一些新东西时,喜欢去比较那些实现相同功能,这有助于我理解各种之间差别,并且能够形成一个自己构建应用时候如何选择使用它们思维模型。...Mobx MobX React Lite Docs[7] 代码行数: 30 因为使用 Redux 之后使用了MobX React, 所以它一直最喜欢管理 React 状态之一。...与许多其他公司一样,企业公司大量线上应用中使用了它。 最近再次使用它之后感受,与其他一些相比,觉得文档略有不足。我会自己再尝试一,然后再做决定。...Redux React Redux docs[13] 代码行数:33 Redux 整个 React 生态系统中最早,最成功状态管理之一。已经许多项目中使用过Redux,如今它依然很强大。...、大量文档以及大量问答,那么Redux一个非常靠谱选择。

    2.7K20

    React教程(详细版)

    react 需求:往div中添加一个h1标签 代码注解:这里涉及到3个文件,一个react(核心),react-dom(用于支持react操作dom)还有一个babel(将jsx语法转成...不难理解,这里是箭头函数,本身没有this指向,所以这个this得看外层,该函数外层render函数体内,所以this就是组件实例对象,所以ref={c=>this.input1=c}意思就是给组件实例对象添加一个...3、工作方式:当请求了自身3000端口不存在资源时,那么会转发给5000端口(优先会匹配自身资源,如果自己有就不会请求5000端口了) 方法二 1、第一步:创建代理配置文件 src创建配置文件...某个组件状态需要让其他组件也能拿到 一个组件需要改变另一个组件状态(通信) 总体原则:能不用就不用,如果不用比较吃力,就可以使用 redux工作流程 11、react-redux 原先redux...独立公司创建,后来react公司发现开发者都这么喜欢react项目中使用redux,所以就自己开发了一个react插件叫react-redux 11.1、react-redux模型图 11.2

    1.7K20

    一个治愈JavaScript疲劳学习计划

    如何去学习 ES6 语法 为什么且如何学习 Redux 什么 GraphQL ?...React 会让你认识到一些像组件、应用程序状态、无状态函数式组件等概念,这些概念对你以后都会有所帮助,即使你以后使用其他框架或。...第3周:掌握 ES6 探索 React 路上,很快就能通过复制粘贴理解到一些要点,但却总有很多不明白地方。...相对于每个组件逐位逐位地存储你状态(换句话说,就是你数据),你可以存到一个 全局仓库,然后再调度到每一个 React 组件上: ? React 世界里,最流行状态管理 Redux。...GraphQL 本身只是一个协议,但它现在最出色实现是 Apollo 一个Redux 兼容地很好

    78820

    第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

    redux-thunk 带来改变非常好理解,它允许我们以函数形式派发一个 action,像这样(解析注释里): // axios 一个用于发起异步请求 import axios from '...这就不由得让人对 thunk 中间件加持 Redux 工作流心生好奇:action 入参必须一个对象,这一点我们第 19 讲分析 dispatch 源码时,可是亲眼见过 action 相关数据格式强校验逻辑...这个函数如何与 createStore 配合工作? 2. dispatch 函数如何被改写? 3. compose 函数如何组合中间件?...源码注释中,已经标明,它返回一个接收 createStore 为入参函数。这个函数将会作为入参传递给 createStore,那么 createStore 会如何理解它呢?...专栏下一讲,将以 React 另一个“好帮手” React-Router 为切入点,为你讲解前端路由相关知识,不见不散。

    40330

    Top JavaScript Frameworks & Topics to Learn in 2017

    Closures (闭包): 了解函数作用域一些特征. Callbacks(回调): 回调另一个函数用于在有结果就绪时准备执行函数。 就像你说,“做你工作,做完后给我打电话。...注意,使用 Flow 来使 IDE 有表现好反馈有一些困难,即使使用 Nuclide。 React 一个用于构建用户界面的 JavaScript ,由 Facebook 创建。...Reducers 不仅仅对于数组重要,同时学习使用Reducers 新方法本身也是有价值redux-saga *:Redux 同步样式副作用。...无论你选择什么,尽量将精力集中它至少6个月 - 1年后,再去学习另一个。 掌握它们真的需要相当多实践。 EDIT: 为什么没有列举出?...另一个很好数据来源 Indeed.com,它汇集了来自各种来源工作列表数据。

    2.3K00

    REACT框架学习心得

    框架概念和工程模板 这一部分内容直接给个链接,github地址在此,原作者基础上加了自己一些内容,仓库最新代码也进行了重构,包括actionCreator和reducer,欢迎提意见和star...redux学习心得 简单说一在看整个教程和代码写法时着重几个点: connect函数[mapDispatchToProps]参数传入一个对象,当对象中键属性对象,实际自动包含了dispatch...当引入了redux-thunk后,需要在createStore上加入thunk中间件,并且上一点中键属性变成了函数,此时异步dispatch需要显式调用。...(Domain data)和应用状态数据(App state)定义 State,而不是用 UI 状态(UI state) Reducer重构介绍中一个核心概念需要理解,就是函数分解,redux重构中又分为...进一步探索 其实这里想说就是react最佳实践东西,确切来说就是组件拆分这一块,感觉用react很重要进阶就是知道什么时候使用无状态组件,如何合理拆分组件,其实比函数分解都难,尤其实际业务中还会有越拆越麻烦现象发生

    1.1K70

    赌5毛钱,你解不出这道Google面试题

    解决这些问题之后,我们最终只需重写代码一小部分即可。 03 创建数据模型 我们需要知道数据如何输入,以及我们希望以何种形式来处理这些数据。...尽管我们仍然可以用 JavaScript 来写一个尾递归函数,但为使得算法更加简单,仍然选择了创建一个典型递归函数。 在编写代码之前,我们需要先找到算法。对于递归,使用深度优先搜索合理。...“不要担心别人不明白计算机科学术语。”向一位同事展示想出不同解决方案时,他如此说道。 1. 算法 我们将从一个节点开始,尽可能向下搜索,直到到达一个端点。...从技术上来讲,这一算法也优于递归方法,因为在这种情况,递归算法会出现堆栈溢出问题。 研究如何使用 RxJS 流数据之后,意识到该方法对本文来说实在过于复杂了。...10 游戏制作 职业程序员生涯中,曾两次遇到过这段代码。其中一次开发独立游戏《Pulsen》时使用 Lua 编写代码代码长度要小得多。

    89710

    react+redux+webpack教程2

    我们来设计一个登录场景,用户输入用户名后,会在问候语位置展示用户名,像这样: ---- 早上好,Mark 用户名: 密 码: 登 录 ---- 预警一先,要用这个小东西展示react+redux...(mapStateToProps)(Login); connectreact-redux这个提供函数,功能就是把组件连接到rudux仓库。...具体说明一: cr两个参数:initialState初始状态;handlers由一堆函数组成对象,每个函数名称对应着一个action类型, 每个函数接受参数与reducer一样,action...cac接受一个参数action类型名称,后面参数所有附带数据属性名称。 好了,把代码规整一。...MVVM框架里只需要建立一个视图模型,用一对双大括号就能完成事情,到react加redux里面为何如此大费周折? 其实专门展示完整redux+react开发流程。

    1.3K70
    领券