Redux异步数据流初探

Redux 简介

用React写的项目中各组件的状态依赖关系非常复杂&＃xff0c;为了便于管理组件的状态&＃xff0c;使用 Redux。

组件化是react最擅长的方面&＃xff0c;但是在实际开发中&＃xff0c;随着应用复杂度地不断提升&＃xff0c;组件之间的状态通信变得越来越多&＃xff0c;组件之间的耦合也变得越来越重。

这时&＃xff0c;Redux诞生了。

Redux对所有“组件”说&＃xff1a;

你们不要在一对一地写信通知状态了&＃xff0c;我是你们的 “通信云基站”&＃xff0c;你们把公共状态存在我这&＃xff0c;只要某个状态一改变&＃xff0c;各组件都能取到状态的最新值。

在Redux中&＃xff0c;最为核心的概念就是 state、action 、reducer 以及 store&＃xff0c;单词大家都懂&＃xff0c;就是初学者不知道该怎么用。

result

以常见的红路灯为例&＃xff0c;将其应用到Redux中&＃xff1a;

action&＃xff1a;就是灯的变化&＃xff0c;"红变绿"等&＃xff0c;用名词表述
state&＃xff1a;就是灯的名字&＃xff0c;红灯、绿灯等&＃xff0c;用名词表述
reducer&＃xff1a;就是灯的变化规则&＃xff0c;红灯之后是绿灯等&＃xff0c;用状态转移表述&＃xff0c;归根到底也是名词
store&＃xff1a;就像是交警&＃xff0c;执行上述的交通规则&＃xff1b;

image.png

image.png

Redux 的精髓 API

&＃xff08;1&＃xff09;store: store对象是保存公共数据的地方&＃xff0c;一个应用只能创建一个store。下面是创建store方式&＃xff1a;

import { createStore } from &＃39;redux&＃39;;
const store &＃61; createStore(function);


&＃xff08;2&＃xff09;state&＃xff1a;state是store映射的数据集合&＃xff0c;一个 state 只对应一个 view&＃xff0c;下面是创建state方法&＃xff1a;

import { createStore } from &＃39;redux&＃39;;
const store &＃61; createStore(function);
const state &＃61; store.getState(); // 通过store.getState()拿到state


&＃xff08;3&＃xff09;action&＃xff1a;state和view捆绑在一起&＃xff0c;view发生变化时会用action发出通知。action是改变state的唯一方法&＃xff0c;它本质是一个对象&＃xff0c;必须要写一个代表action名称的属性——type。除此之外&＃xff0c;其他属性可以自由设置&＃xff0c;下面是action对象示例&＃xff1a;

const action &＃61; { type: &＃39;student_age&＃39;, age: 12
};


&＃xff08;4&＃xff09;store.dispatch()&＃xff1a;store.dispatch()是 view 发出 action 的唯一方法&＃xff0c;也可以理解为发射action通知的唯一方法。下面是使用store.dispatch()的代码示例&＃xff1a;

store.dispatch({type: &＃39;student_age&＃39;,age: 12
});


&＃xff08;5&＃xff09;reducer&＃xff1a;reducer是一个计算state的函数&＃xff0c;接受两个参数&＃xff0c;当前的state和action。当store收到action通知后&＃xff0c;一定要返回一个全新的state&＃xff0c;这样view才能发生变化。store接收到action传来的数据&＃xff0c;然后根据逻辑计算数据&＃xff0c;这个过程就称为reducer。下面是reduer的代码示例&＃xff1a;

import { createStore } from &＃39;redux&＃39;;
const reducer &＃61; (state &＃61; defaultState, action) &＃61;> { switch (action.type) { case &＃39;student_age&＃39;: return state &＃43; action.age; default: return state;
}};
const store &＃61; createStore(reducer); // 生成store时传入reducer


实际开发中要在生成store时传入reducer&＃xff0c;这样store.dispatch()会自动触发reducer函数执行。

&＃xff08;6&＃xff09;store.subscribe()&＃xff1a;store.subscribe()监听state变化&＃xff0c;state一旦变化就自动触发该函数。下面是它的代码示例&＃xff1a;

import { createStore } from &＃39;redux&＃39;;
const store &＃61; createStore(reducer);
store.subscribe(listener);


通过一张图来看一下redux、react-redux是如何工作的&＃xff1a;