Redux入门

快来打我* 2021-11-17 10:26 329阅读 0赞

### 文章目录 ###

*  概念
 *  工作流程
 *   *  Action
     *  Reducer
 *  store
 *   *  store的创建

# 概念 #

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

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

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

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

# 工作流程 #

下图是Redux的工作流程。

\[外链图片转存失败(img-YnSYW3V1-1564475300202)([https://note.youdao.com/src/WEBRESOURCEf1875a2468ce5da97db888717021f5fe][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);

[https_note.youdao.com_src_WEBRESOURCEf1875a2468ce5da97db888717021f5fe]: https://note.youdao.com/src/WEBRESOURCEf1875a2468ce5da97db888717021f5fe