Redux学习笔记-基础概念

Redux学习笔记-基础概念

八月 03, 2021

前言:

系统的过一下Redux的知识和Redux几个重要的异步middleware


什么是Redux

redux是JavaScript状态容器,提供可预测化的状态管理。在标准的MVC框架中,数据可以在UI组件和存储之中双向流动,这就使得数据的变化不可控。而Redux则严格显示了数据只能在一个方向流动,如图:

在Redux中,所有的数据都被保存在一个被称为store的容器中。任何UI组件都可以从store访问特定对象的状态。如果需要修改状态,则需要发送一个action。当一个store接收到一个action,它将把这个actin代理给相关的reducer。reducer是一个纯函数,它可以查看之前的状态,执行一个action并返回一个新的状态。

为了实现这样的单向的数据流,Redux采用了三大设计原则。

单一数据源:

整个应用的state被储存在一棵object tree中,并且这个object tree只存在于唯一一个store中。

这让同构应用开发变得非常容易。此外受益于单一的state tree,以前难以实现的如“撤销/重做”这类功能的实现也变得轻而易举。

state是只读的:

唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接修改state,相反它们只能表达想要修改的意图。因为所有的修改都被集中处理,且严格按照一个接一个的顺序执行,因此不用担心race condition的出现。而且因为action就是普通对象,所以它们可以白日志打印、序列化、储存,然后在后期调试或测试时读取。

使用纯函数来执行修改:

为了描述action如何改变state tree,你需要编写reducers。

Reducer只是一些纯函数,它接受先前的state和action,并返回新的state。

Action

Action是把数据从应用传到store的有效载荷。它是store数据的唯一来源。一般会通过store.dispatch()将action传到store。

1
2
3
4
{
type: 'ADD_TODO',
text: 'Build my first Redux app'
}

Action本质上是JavaScript普通对象。根据约定,action内必须使用一个字符串类型的type字段表示将要执行的动作。除了type字段外,action对象的结构完全由你自己决定。不过我们应该尽量减少在action中传递的数据。