前端知识 | Redux的使用

什么是 Redux?

Redux 是整个项目的状态管理中心，数据存储仓库，集中式的存储和管理所有的组件的状态，并且可以让组件的状态以一种可预测的方式变化。

什么情况下使用 Redux？

Redux 主要作为一个状态树的存在，主要作用可以用来集中管理共享数据，如果你想取某个数据，你就直接从状态树（store）上拿,你修改数据，其他页面上从状态树上取到的数据也会发生改变（如果你用了 subscribe 监听函数或者使用了 react-redux 类似的库帮你监听，则其他页面取到的数据会自动更新），Redux 不是必须的，它的使用场景是当你觉得项目内的组件通信太过于繁琐的时候使用，比如你有很多页面，很多组件，他们之间的通信很麻烦，或者说有些数据你需要保存起来供所有组件使用,这时候 Redux 的作用就体现出来了。

正如 Redux 的作者所说：

Flux 架构就像眼镜：您自会知道什么时候需要它。

核心概念

action

action 是一个对象,它包含了引起 store 状态变化的行为，他是将数据运输至 store 里的唯一手段。它通常包含一个 type 属性和一个需要传入 store 的数据，数据类型可以自定义。比如我们在做用户登录的时候经常需要将用户信息保存到 Redux，这时候 action 就可以是：

reducer

action 仅仅申明了我们想要改变 store 以及附带的数据，那么我们到底怎么去改变数据呢，比如说有一天用户的 money 变为2000，那么传入的 action 是：

那么这时候我们要怎么取改变 store 里面的值呢？这时候就要用到 reducer

简单来说，reducer 就是根据传入 actioon 类型描述如何去更改 store 中的状态。

store

单一状态树

action 描述了更改数据行为的发生，reducer 描述了如何去更改数据,那么我们数据还要有一个归宿就是 store，Redux 的核心就是一个 store 对象，它里面包含着我们所储存的所有状态，它类似一个物流中心，我们可以往里面存放数据，也可以从里面取出数据。它提供的方法包括:

1、getState() 获取当前的的 state 状态值

2、dispatch(action) 派发一个 action 行为更新 state

3、subscribe(listener) 注册一个监听器(当 state 跟新完了之后会自动执行)

这样这三个东西就串联在一起了。

store.dispatch(action) 用来接收不同的 action，表明要更新 state 的 type 类型以及更新需要的数据，再通过 reducer 函数计算到底怎么去更改 state，加还是减。

说了这么多，我们最后上个例子吧：

app.js

action.js

reducer.js

store.js

PS：这是最原始的 redux 使用方法，在实际开发中，通常还会结合 create-redux 等插件一起使用。

-END-

应用的整体全局状态以对象树的方式存放于单个store。唯一改变状态树（state tree）的方法是创建action， 一个描述发生了什么的对象，并将其dispatch给store。要指定状态树如何响应action来进行更新，你可以编写reducer函数，这些函数根据旧的action来计算新state。

上面这段摘抄自官网，个人认为是比较通俗的概括了redux的使用方法，你或许还没有很理解它，继续往下看，相信你会有所收获

一个简单的例子，带你熟悉redux

‘默认值’ 存在state里，我们点击按钮之后，改变改值

使用脚手架创建应用，安装依赖

安装redux

编写ui

添加home组件

创建action：

在根目录下创建action文件夹，在action文件下创建index.js

这里我们定义一个action的构建函数，让他返回action对象

action 可以理解为表示即将放生的变化类别，它是一个普通的对象，必须包含type属性，这里我们添加我们需要的value属性，作为传递的数据

创建Reducer：

在根目录下新建reducer文件夹，在reducer文件夹下新建index.js 文件

本质就是函数，用于响应发送过来的action，函数接受两个参数，第一个是初始化state，第二个是发送过来的action

这里我们将默认的state也放到reducer 文件中Object.assign({},state,action)

如果action的type为send_type 则返回， 不要忘记将reducer暴露出去

创建store

store是用来把action和reducer关联到一起的， 我们通过createStore来构建store，通过subscribe来注册监，通过dispatch来发送action。

store.dispatch() 并传入一个action对象，store将执行所有reducer函数并计算出更新后的state，调用getState()可以获取新state

dispatch一个action可以形象的理解为“出发一个事件”，发生了一些事情，我们希望store知道这件事。Reducer就像事件监听器一样，当它们收到关注的action后，它就会更新state作为响应

这里是最难理解的地方，你可以认为store的dispatch方法才是最终告知要执行action的动作了，你这个动作具体做了什么需要reducer来处理

根目录下创建store文件夹，在store文件夹下创建index.js

同样的将store暴露出去

action、reducer、store 都写好了，现在我们将这个redux用到组件中

我们通过store的subscribe来注册监，通过dispatch来发送action

组件一加载完成就注册监听

Home组件

store.getState()获取当前state

---