5 redux 数据流

Love The Way You Lie 2023-02-27 15:57 10阅读 0赞

如下 4 个步骤描述了redux的state是如何被更新的

**调用 ****store.dispatch(action)**

调用store.dispatch(action)，将action传给store

你可以在任何地方调用 store.dispatch(action)，

**Redux store 调用 reducer 函数。**

store会调用[reducer][]，并传入state 树和 action

根 reducer 可能接收到这样的数据：

// 当前应用的 state

let previousState = \{

visibleTodoFilter: 'SHOW\_ALL',

todos: \[

\{

text: 'Read the docs.',

complete: false

\}

\]

\}

// 将要执行的 action（添加一个 todo）

let action = \{

type: 'ADD\_TODO',

text: 'Understand the flow.'

\}

// reducer 返回处理后的 state

let nextState = todoApp(previousState, action)

**根 reducer** **调用遍历所有 子****reducer**

各个reducer都会返回各自的state，组合成state树

function todos(state = \[\], action) \{

// 省略处理逻辑...

// 如果有更新，返回新的state

return nextState

\}

function visibleTodoFilter(state = 'SHOW\_ALL', action) \{

// 省略处理逻辑...

return nextState

\}

let todoApp = combineReducers(\{

// 调用子reducer

todos,

visibleTodoFilter

\})

**Redux store 保存了根 reducer 返回的完整 state 树**

这个新的state树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前 state。

[reducer]: https://www.redux.org.cn/docs/basics/Reducers.html

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 React【Redux简介、什么时候使用Redux、Redux 库和工具、单向数据流、Redux Action、Redux Reducer、Redux Store】(十)

![5cf10194cb164aeb849319fb6864f88b.gif][] 文章目录 Redux简介什么时候使用Redux Redux 库和工具单向

太过爱你忘了你带给我的痛/ 2024年02月19日 10:40/ 0 赞/ 25 阅读

相关 5 redux 数据流

如下 4 个步骤描述了redux的state是如何被更新的调用 store.dispatch(action) 调用store.dispatch(action)，将a

Love The Way You Lie/ 2023年02月27日 15:57/ 0 赞/ 11 阅读

相关深入理解 redux 数据流和异步过程管理

前端框架的数据流前端框架实现了数据驱动视图变化的功能，我们用 template 或者 jsx 描述好了数据和视图的绑定关系，然后就只需要关心数据的管理了。数据在组件和

淡淡的烟草味﹌/ 2022年09月12日 14:52/ 0 赞/ 183 阅读

相关浅谈在React中使用Redux数据流（三）

1、react-redux项目结构几个文件和文件夹： 1) actions：存放Action，用户的行为； 2) components：展示组件； 3) contai

心已赠人/ 2022年06月15日 01:47/ 0 赞/ 203 阅读

相关浅谈在React中使用Redux数据流（二）

1、react-redux安装安装命令：npm install react-redux redux 安装两个包： redux自身是一个独立的工作流； react-re

柔光的暖阳◎/ 2022年06月15日 01:42/ 0 赞/ 178 阅读

相关浅谈在React中使用Redux数据流（一）

1、数据流是什么？为什么要用数据流？ 1）数据流是行为与响应的抽象。用户在页面上输入表单、按下按钮、拖拽等行为，页面会根据用户的行为给出一些响应，如刷新、跳转、局部刷新、

太过爱你忘了你带给我的痛/ 2022年06月15日 01:29/ 0 赞/ 200 阅读

相关 redux(二) 数据流向

上节我们做了一个简单的例子 ![这里写图片描述][SouthEast] 点击按钮,hello会变成其他字符 ![这里写图片描述][SouthEast 1] 点击字体，

约定不等于承诺〃/ 2022年06月12日 03:12/ 0 赞/ 305 阅读

相关数据流

DataInputStream和DataOutputStream类提供了一些方法，可以用二进制格式读/写java的基本数据类型和字符串。 DateInputStream的re

缺乏、安全感/ 2022年03月14日 13:34/ 0 赞/ 245 阅读

相关 qt5之数据流

1，qt5中的datastream include "widget.h" include "ui_widget.h" include <QDataSt

港控/mmm°/ 2022年01月21日 10:59/ 0 赞/ 390 阅读

相关 React (5) Redux 进阶

1. UI 组件 1. render()函数放在另外一个单独的UI.js 文件和动作行为分开 2. UI 上面所用的数据和函数, 通过父组件传递过来,用 this.

野性酷女/ 2021年09月17日 04:46/ 0 赞/ 440 阅读