React 搭配 Redux

介绍

动机

redux是管理State的一个东东,所有State都需要经过redux来操作。

基本概念

redux中有三个基本概念,Action,Reducer,Store。

基础

Action

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

Action 有两个作用。

  • 用Action来分辨具体的执行动作。比如是create 还是delete?或者是update?
  • 操作数据首先得有数据。比如添加数据得有数据,删除数据得有ID。。action就是存这些数据的地方。

Reducer

Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。这是 reducer 要做的事情。

Action就像leader,告诉我们应该做哪些事,并且给我们提供‘资源(就是上面说的数据)’,真正干活的是苦逼的Reducer。

Store

一个应用只有一个Store。

上面章节中,我们学会了使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。

Store 就是把它们联系到一起的对象。Store 有以下职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器。

Store提供了一些方法。让我们很方便的操作数据。
我们不用关心Reducer和Action是怎么关联在一起的,Store已经帮我们做了这些事。