概述

Redux 帮你管理“全局”状态 - 哪些应用程序的许多部分都需要的状态。

Redux 在以下情况下更有用：

在应用的大量地方，都存在大量的状态
应用状态会随着时间的推移而频繁更新
更新该状态的逻辑可能很复杂
中型和大型代码量的应用，很多人协同开发

基本概念和API

Store

保存数据的地方，可看作一个容器，整个应用只能有一个Store。Redux提供了createStore这个函数来生成Store，此函数接受另一个函数作为参数，返回新生成的Store对象。store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值

import { createStore } from 'redux';
const store = createStore(fn);

State

Store对象包含所有数据。如果想得到某个时刻的数据，就要对Store生成快照，这种时间点的数据集合，就叫做State。当前此刻的State可通过 store.getState()(store是生成的store对象)获取。

Redux规定，一个State对应一个View，只要State相同，View就相同。

Action

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

State的变化导致View的变化。但是用户接触不到State，只能接触到View。所以State的变化必须是View导致的。Action就是View发出的通知，表示State将发生变化。通过store.dispatch()发出Action。

Action是一个对象。其中的type是必须的，表示Action的名称。其他属性可自由设置。

//必须参数：type是一个常量字符串，表示Action的名称。
//可选参数：payload:可以是任何类型的值，代表action的有效载荷；error:如果此action返回error，则此值为true；meta: 可以是任何类型的值，适用于不属于payload的额外信息；index:完成任务的动作序列号；.... 还可自定义属性 
const action = {type:'ADD_TODO',payload:'Learn Redux'}

Action Creator

Action 创建函数只是简单的返回一个action。为了方便需要创建多种Action

const ADD_TODO = 'ADD_TODO';
function addTodo(text){
  return {
    type:ADD_TODO,
    text
  }
}
const action = addTodo('Learn Redux');

store.dispatch

更新 state 的唯一方法是调用 **store.dispatch()** 并传入一个 action 对象。 store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。dispatch 一个 action 可以形象的理解为 "触发一个事件"。发生了一些事情，我们希望 store 知道这件事。 Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。

是View发出Action的唯一方法。

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

我们通常调用 action creator 来调用 action：

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

Reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

Store收到Action后，必须给出一个新的State，这样View才会发生变化。这种State的计算过程叫Reducer。Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State。

Reducer是一个纯函数，遵循以下约束：

不得改写参数
不能调用系统过得I/O的API
不能调用Data.now()或Math.random()等不纯方法，(因为每次会得到不同的结果)

import { createStore } from 'redux'; const reducer = (state,action)=>{//接受Action和State作为参数 switch(action.type){ case 'ADD': return state + action.payload; default: return state; } } const store = createStore(reducer);//创建的时候传入Reducer store.dispatch({type:"ADD",payload:1});//传入一个Action，会自动调用Reducer，得到新的State
store.subscribe

Store允许使用store.subscribe方法设置监听函数，一旦State发生变化，就自动执行这个函数。所以只要把View的更新函数(比如React项目的render方法或setState方法；cocos项目的update方法)放入监听函数中，就会实现View的自动渲染。store.subscribe方法返回一个函数，调用此函数就可以解除监听（这种写法还是第一次见😂）

Redux基础

概述

基本概念和API

Store

State

Action

Action Creator

store.dispatch

Reducer

store.subscribe

流程图