1 redux 核心概念

小鱼儿 2023-02-27 12:07 6阅读 0赞

**State**

state表示Web应用的状态，用于保存Web应用的数据，todo 应用（示例应用）的 state 可能长这样：

\{

todos: \[

\{

text: 'Eat food',

completed: true

\}, \{

text: 'Exercise',

completed: false

\}

\],

visibilityFilter: 'SHOW\_COMPLETED'

\}

要想更新 state 中的数据，你需要发起一个 action。

**Action**

Action 就是一个普通 JavaScript 对象用来描述发生了什么。下面是一些 action 的示例：

\{  type: 'ADD\_TODO', text: 'Go to swimming pool' \}

\{  type: 'TOGGLE\_TODO', index: 1 \}

\{  type: 'SET\_VISIBILITY\_FILTER', filter: 'SHOW\_ALL' \}

**Reducer**

action 如何更新 state？这个功能有 reducer 完成。

reducer 是一个接收 state 和 action，并返回新的 state 的函数。如下2个reducer示例：

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

if (action.type === 'SET\_VISIBILITY\_FILTER') \{

return action.filter;

\} else \{

return state;

\}

\}

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

switch (action.type) \{

case 'ADD\_TODO':

return state.concat(\[\{  text: action.text, completed: false \}\]);

case 'TOGGLE\_TODO':

return state.map((todo, index) =>

action.index === index ?

\{  text: todo.text, completed: !todo.completed \} :

todo

)

default:

return state;

\}

\}

再开发一个 reducer 调用这两个 reducer，进而来管理整个应用的 state：

function todoApp(state = \{\}, action) \{

return \{

todos: todos(state.todos, action),

visibilityFilter: visibilityFilter(state.visibilityFilter, action)

\};

\}

这差不多就是 Redux 思想的全部。

发表评论取消回复

表情：

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

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

相关阅读

相关 reactjs redux的三个核心概念：Action（动作）、Reducer和Store（存储）

7.2. redux的三个核心概念 7.2.1. action 1. 动作的对象 2. 包含2个属性  type：标识属性, 值为字符串, 唯一,

小灰灰/ 2024年02月17日 13:16/ 0 赞/ 41 阅读

相关什么是Redux？它的核心概念有哪些？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 什么是Redux？ ⭐ 它的核心概念有哪些？ ⭐ 写在最后 --------------------

Bertha 。/ 2023年10月16日 13:18/ 0 赞/ 59 阅读

相关 Redux核心理念的基本介绍

文章目录 Redux的核心理念介绍 Redux的出现背景 Redux核心理念-Store Re

怼烎@/ 2023年10月02日 20:57/ 0 赞/ 10 阅读

相关 1 redux 核心概念

State state表示Web应用的状态，用于保存Web应用的数据，todo 应用（示例应用）的 state 可能长这样： \{ todos: \[ \{

小鱼儿/ 2023年02月27日 12:07/ 0 赞/ 7 阅读

相关 Elasticsearch 核心概念

1、lucene和Elasticsearch的前世今生 2、elasticsearch的核心概念 (1)、Near Realtime (NRT)：近实时，两个意思，从写入数

阳光穿透心脏的1/2处/ 2022年06月14日 10:06/ 0 赞/ 286 阅读

相关 Redux（1）

Redux简介 ![这里写图片描述][SouthEast] Redux的核心代码可以理解成一个库，但同时也强调了一种架构思想。上面这个图是Redux的核心运作流程。

快来打我*/ 2022年06月12日 01:29/ 0 赞/ 34 阅读

相关 redux精品先导课程—02redux基本概念

1.相关概念 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

不念不忘少年蓝@/ 2022年03月10日 03:52/ 0 赞/ 178 阅读

相关 Redux 核心 API 学习小记

Store 是应用状态 state 的管理者，包含下列四个函数： 1. `Store.getState()` // 获取整个 state 树

以你之姓@/ 2021年12月12日 08:47/ 0 赞/ 261 阅读

相关 Docker核心概念

Docker部分的操作都围绕着它的三大核心概念：镜像、容器和仓库。因此，准确把握三大核心概念对于掌握Docker技术尤为重要。 1. Docker镜像 Docker镜像

曾经终败给现在/ 2021年09月21日 12:24/ 0 赞/ 407 阅读

相关 MVC/MVVM（Redux的核心概念）

Redux核心概念 action reducer store MVC/MVVM MVC/MVVM都是一个UI的解决方案，是一种软件架构方式，用于降低UI，以及UI

亦凉/ 2021年09月02日 03:27/ 0 赞/ 390 阅读