Redux入门

概念

React作为一个视图层框架，天然是不适合用来管理数据的。因为React框架中，父子组件的通信通过props（父向子传递），或者是回调函数（子向父传递）两种方式实现。

若是只是父子组件之间的通信，实现起来还不算太麻烦，若是跨层级的通信，则需要多个组件之间层层通信，实现起来不仅麻烦而且性能也不好。

还有我们知道React的组件是可以构建出一棵组件树的，若是需要通信的两个组件不在同一颗子树内，那么通信起来则会是一场噩梦。

于是就有了Redux，它可以帮助我们管理数据，所有的组件都通过统一的一个store读写数据。因此我们就可以节省大量组件间通信的操作。

工作流程

下图是Redux的工作流程。

[外链图片转存失败(img-YnSYW3V1-1564475300202)(https://note.youdao.com/src/WEBRESOURCEf1875a2468ce5da97db888717021f5fe)]

Action

Action是把数据从应用传到store的有效载荷，也是store数据的唯一来源。

Action本质上就是JavaScript对象。我们约定，action内必须使用一个字符串类型的type字段来表示将要执行的动作。

const ADD_TODO_ITEM = 'add_todo_item';
const action = {
        type: ADD_TODO_ITEM
};

Action就好比是一条命令，一条让store执行相应操作的命令。

Reducer

Action是一条命令，可是store并不能直接理解这些命令，于是就要通过Reducer来为store“解释”命令的含义。

Reducer指定了应用状态的变化如何响应action并发送到store。

reducer就是一个纯函数，接收旧的state和action，返回新的state。

function reducer(state, action){
    if(action.type === 'add_todo_item'){
        //Do something     
    }
}

通过为state设置默认属性，还可以为store设置初始值。

const defailtState = {
    content: '',
    list: []
};

function reducer(state=defaultState, action){
    if(action.type === 'add_todo_item'){
        //Do something     
    }
    return state;
}

store

顾名思义，store就是用来保存应用数据的对象，可以想象成一个数据库。

它有以下方法：

• getState：用来获取store当前的数据
• dispatch(action)：将action发送给store，store再转发至reducer进行处理。
• subscribe：该方法在组件中使用，作用是注册store发生变化的监听器。

需要的是注意，应用中只能有一个store。

store的创建

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);