什么是Redux ？

“Redux 是 JavaScript 状态容器，提供可预测化的状态管理”

Redux 的设计思想很简单，就两句话：

1.Web 应用是一个状态机，视图与状态是一一对应的。

2.所有的状态，保存在一个对象里面。

redux有三大准则

1.单一数据源

整个应用状态，都应该被存储在单一store的对象树中。

2.只读状态

唯一可以修改状态的方式，就是发送（dispatch）一个动作（Action），通俗来讲，就是说只有getter，没有setter。

3.使用纯函数去修改状态，（纯函数是指不依赖于且不改变它作用域之外的变量状态的函数，也就是说，纯函数的返回值只由它调用时的参数决定，它的执行不依赖于系统的状态（比如：何时、何处调用它）

redux的几个概念

（1）Action

Action是唯一可以改变状态的途径，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action会按顺序执行，这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的，表示 Action 的名称：

const action = {

type: 'login',

payload: ...,

...

};

（2）Store

Store管理着整个应用的状态，store可以理解为一个存储数据的仓库，一个应用就这么一个仓库，但本质上这个store是一个对象。 Redux通过createStore这个函数，来生成store对象：

import { createStore } from 'redux';

const store = createStore(fn);

Store提供了一个方法dispatch，这个就是用来发送一个动作，去修改Store里面的状态

store.dispatch({

type: 'login',

payload: '...'

});

然后可以通过getState方法来重新获得最新的状态，也就是state。

简洁介绍 state

state就是当前的状态，那么store和state是什么关系呢？我们可以认为 store 对象包括所有数据，如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

通过store.getState()我们可以得到某一时点的 state。

import { createStore } from 'redux';

const store = createStore(fn);

const state = store.getState();

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

简单的说：getState() 会返回当前的state树。（当前很重要）。即state是当前数据的状态。

（3）Reducer

当dispatch之后，getState的状态发生了改变，Reducer就是用来修改状态的。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function (state, action) {

// ...

return new_state;

};

借鉴一张图来形容他们的关系：

什么时候需要rudux？

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

1.用户的使用方式非常简单

2.用户之间没有协作

3.不需要与服务器大量交互，也没有使用 WebSocket

4.视图层（View）只从单一来源获取数据

上面这些情况，都不需要使用 Redux。

用户的使用方式复杂

1.不同身份的用户有不同的使用方式（比如普通用户和管理员）

2.多个用户之间可以协作

3.与服务器大量交互，或者使用了WebSocket

4.View要从多个来源获取数据

上面这些情况才是 Redux 的适用场景：多交互、多数据源。

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。

1.某个组件的状态，需要共享

2.某个状态需要在任何地方都可以拿到

3.一个组件需要改变全局状态

4.一个组件需要改变另一个组件的状态

什么是redux