Redux 的基础概念-API

三个基本原则

  • 整个应用只有唯一一个可信数据源,也就是只有一个 Store
  • State 只能通过触发 Action 来更改
  • State 的更改必须写成纯函数,也就是每次更改总是返回一个新的 State,在 Redux 里这种函数称为 Reducer

Actions

Action 很简单,就是一个单纯的包含 { type, payload } 的对象,type 是一个常量用来标示动作类型,payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。

比如一个最简单的 action:

{
  type: ‘ADD_TODO‘,
  text: ‘Build my first Redux app‘
}

一般来说,会使用函数(Action Creators)来生成 action,这样会有更大的灵活性,Action Creators 是一个pure function,它最后会返回一个 action 对象:

function addTodo(text) {
  return {
    type: ‘ADD_TODO‘,
    text
  }
}

所以现在要触发一个动作只要调用 dispatchdispatch(addTodo(text))

稍后会讲到如何拿到 store.dispatch

Reducers

Reducer 用来处理 Action 触发的对状态树的更改。

所以一个 reducer 函数会接受 oldState 和 action 两个参数,返回一个新的 state:(oldState, action) => newState。一个简单的 reducer 可能类似这样:

const initialState = {
  a: ‘a‘,
  b: ‘b‘
};

function someApp(state = initialState, action) {
  switch (action.type) {
    case ‘CHANGE_A‘:
      return { ...state, a: ‘Modified a‘ };
    case ‘CHANGE_B‘:
      return { ...state, b: action.payload };
    default:
      return state
  }
}

值得注意的有两点:

  • 我们用到了 object spread 语法 确保不会更改到 oldState 而是返回一个 newState
  • 对于不需要处理的 action,直接返回 oldState

Reducer 也是 pure function,这点非常重要,所以绝对不要在 reducer 里面做一些引入 side-effects 的事情,比如:

  • 直接修改 state 参数对象
  • 请求 API
  • 调用不纯的函数,比如 Data.now() Math.random()

因为 Redux 里面只有一个 Store,对应一个 State 状态,所以整个 State 对象就是由一个 reducer 函数管理,但是如果所有的状态更改逻辑都放在这一个 reducer 里面,显然会变得越来越巨大,越来越难以维护。得益于纯函数的实现,我们只需要稍微变通一下,让状态树上的每个字段都有一个 reducer 函数来管理就可以拆分成很小的 reducer 了:

function someApp(state = {}, action) {
  return {
    a: reducerA(state.a, action),
    b: reducerB(state.b, action)
  };
}

对于 reducerA 和 reducerB 来说,他们依然是形如:(oldState, action) => newState 的函数,只是这时候的 state 不是整个状态树,而是树上的特定字段,每个 reducer 只需要判断 action,管理自己关心的状态字段数据就好了。

Redux 提供了一个工具函数 combineReducers 来简化这种 reducer 合并:

import { combineReducers } from ‘redux‘;

const someApp = combineReducers({
  a: reducerA,
  b: reducerB
});

如果 reducer 函数名字和字段名字相同,利用 ES6 的 Destructuring 可以进一步简化成:combineReducers({ a, b })

象 someApp 这种管理整个 State 的 reducer,可以称为 root reducer。

Store

现在有了 Action 和 Reducer,Store 的作用就是连接这两者,Store 的作用有这么几个:

  • Hold 住整个应用的 State 状态树
  • 提供一个 getState() 方法获取 State
  • 提供一个 dispatch() 方法发送 action 更改 State
  • 提供一个 subscribe() 方法注册回调函数监听 State 的更改

创建一个 Store 很容易,将 root reducer 函数传递给 createStore 方法即可:

import { createStore } from ‘redux‘;
import someApp from ‘./reducers‘;
let store = createStore(someApp);

// 你也可以额外指定一个初始 State(initialState),这对于服务端渲染很有用
// let store = createStore(someApp, window.STATE_FROM_SERVER);

现在我们就拿到了 store.dispatch,可以用来分发 action 了:

let unsubscribe = store.subscribe(() => console.log(store.getState()));

// Dispatch
store.dispatch({ type: ‘CHANGE_A‘ });
store.dispatch({ type: ‘CHANGE_B‘, payload: ‘Modified b‘ });

// Stop listening to state updates
unsubscribe();

Data Flow

以上提到的 store.dispatch(action) -> reducer(state, action) -> store.getState() 其实就构成了一个“单向数据流”,我们再来总结一下。

1. 调用 store.dispatch(action)

Action 是一个包含 { type, payload } 的对象,它描述了“发生了什么”,比如:

{ type: ‘LIKE_ARTICLE‘, articleID: 42 }
{ type: ‘FETCH_USER_SUCCESS‘, response: { id: 3, name: ‘Mary‘ } }
{ type: ‘ADD_TODO‘, text: ‘Read the Redux docs.‘ }

你可以在任何地方调用 store.dispatch(action),比如组件内部,Ajax 回调函数里面等等。

2. Action 会触发给 Store 指定的 root reducer

root reducer 会返回一个完整的状态树,State 对象上的各个字段值可以由各自的 reducer 函数处理并返回新的值。

  • reducer 函数接受 (state, action) 两个参数
  • reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新并返回一个新的 state

3. Store 会保存 root reducer 返回的状态树

新的 State 会替代旧的 State,然后所有 store.subscribe(listener) 注册的回调函数会被调用,在回调函数里面可以通过 store.getState() 拿到新的 State。

+

这就是 Redux 的运作流程,接下来看如何在 React 里面使用 Redux。

时间: 2024-10-13 00:28:38

Redux 的基础概念-API的相关文章

C# 基础概念

1.     面向对象的思想主要包括:继承 多态 封装 ●       封装:用抽象的数据类型将数据和基于数据的操作封装在一起,数据被保护在抽象数据类型内部. ●       继承:子类拥有父类的所有数据和操作. ●       多态:一个程序中同名的不同方法共存的情况. 有两种形式的多态– 重载与重写. 2.     什么是装箱和拆箱 装箱(boxing)和拆箱(unboxing)机制使得在C#类型系统中,任何值类型.引用类型和object(对象)类型之间进行转换,这种转换称为绑定连接.简单地

Elasticserach学习笔记-01基础概念

本文系本人根据官方文档的翻译,能力有限.水平一般,如果对想学习Elasticsearch的朋友有帮助,将是本人的莫大荣幸. 原文出处:https://www.elastic.co/guide/en/elasticsearch/reference/current/_basic_concepts.html ElasticSearch有几个核心概念,了解它们将有助于我们的整个学习过程. 近乎实时(NRT)Elasticsearch是一个近乎实时的搜索平台.这意味着从你为一个文档建立索引到该文档可被检索

RabbitMQ基础概念详细介绍

你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松地解决这些问题. 消息服务擅长于解决多系统.异构系统间的数据交换(消息通知/通讯)问题,你也可以把它用于系统间服务的相互调用(RPC).本文将要介绍的RabbitMQ就是当前最主流的消息中间件之一. RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议

Java 技术体系基础概念

Java 技术体系基础概念 =============================================================================== 概述: =============================================================================== 编程语言: [百度百科解释] 编程语言俗称"计算机语言",种类非常的多,总的来说可以分成机器语言.汇编语言.高级语言三大类.电脑每做的

.net基础概念

.net基础概念 1.       .NET Framework 是支持生成和运行下一代应用程序和 XML Web services 的内部 Windows 组件..NET Framework 具有两个主要组件:公共语言运行库(Common Language Runtime)和 .NET Framework 类库(Framework Class Library). 2.       公共语言运行库)(Common Language Runtime) 是 .NET Framework 的基础.可以

Windows基础概念

窗口 每个GUI应用程序都有一个窗口,它由多个部分组成. 包括标题栏,[a1] 菜单栏,客户区[a2] ,状态栏等 对话框是窗口,还是控件? 窗口类 每个窗口都对应一个窗口类. 窗口类定义了菜单项,背景,图标,鼠标指针样式,和窗口消息处理函数.  每个窗口类都对应一个消息处理函数,即每个窗口都有自己的消息处理函数. 应用程序在创建窗口前,需向系统注册窗口类,或是用系统已定义好的窗口类. 消息和消息处理函数 消息的分类: COMMAND 和  WM_ ,还有一类是通知型的消息,以及控件消息? 控件

并行计算之基础概念(转)

原文地址:http://www.cnblogs.com/kuliuheng/p/4058858.html 并行计算(Parallel Computing)是指同时使用多种计算资源解决计算问题的过程,是提高计算机系统计算速度和处理能力的一种有效手段.它的基本思想是用多个处理器来协同求解同一问题,即将被求解的问题分解成若干个部分,各部分均由一个独立的处理机来并行计算.并行计算系统既可以是专门设计的.含有多个处理器的超级计算机,也可以是以某种方式互连的若干台的独立计算机构成的集群.通过并行计算集群完成

rabbitmq 基础概念介绍

[引言] 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松地解决这些问题. 消息服务擅长于解决多系统.异构系统间的数据交换(消息通知/通讯)问题,你也可以把它用于系统间服务的相互调用(RPC).本文将要介绍的RabbitMQ就是当前最主流的消息中间件之一. [RabbitMQ简介] AMQP,即Advanced Message Queuing Protocol,高级消息队列协议

Android Multimedia框架总结(五)多媒体基础概念

http://blog.csdn.net/hejjunlin/article/details/52431887 上篇中介绍了MediaPlayer从prepare到playback的其他过程,但是很多的一些音视频的基础概念可能还不是很清楚,今天将介绍下对于多媒体开发时,常常有一些基本概念.看下今天的Agenda: 对杂而乱的概念进行归类 视频部分相关 音频部分相关 先看一张图,这样常常在说的,是否真的了解它们真实含义: 对杂而乱的概念进行归类 视频分辨率 标清.高清.720P- 标清:意思就是"