Redux入门笔记

古城微笑少年丶 2022-06-13 11:14 232阅读 0赞

附上阮一峰大神教程传送门：  
[http://www.ruanyifeng.com/blog/2016/09/redux\_tutorial\_part\_one\_basic\_usages.html][http_www.ruanyifeng.com_blog_2016_09_redux_tutorial_part_one_basic_usages.html]

# store #

store就是保存数据的地方，**整个应用只有唯一的一个store**。

换句话说，整个应用的state都被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。

Redux提供函数createStore来生成store。

import { createStore } from 'redux';
    const store = createStore(fn);// 这个函数的含义会在后面的Reducer部分解释。

补充一点，createStore方法还可以接受第二个参数，表示State的最初状态，通常是服务器给出。

let store = createStore(todoApp, window.STATE_FROM_SERVER)

store的职责有：

**1、维持应用的state**  
**2、更新state**：dispatch(action)  
**3、注册监听器**： store.subscribe(listener)，当state发生变化，就会自动执行这个监听函数。  
**4、注销监听器**

store.subscribe这个函数会返回一个函数，调用这个返回的函数可以解除监听。

let unsubscribe = store.subscribe(() => console.log(store.getState()) ); unsubscribe();

# state #

store存储整个应用的数据，如果想要得到某个时点的数据，就要对store生成快照。生成的数据集合就是state。

import { createStore } from 'redux';
    const store = createStore(fn);
    
    const state = store.getState();

Redux规定，一个state对应一个view，只要state相同，view就相同。

# Action #

Action是把数据从应用传递到store的工具，它是store数据的唯一来源。

对于React来说，用户在于View交互的时候，会导致State也发生变化；Action就是view向store发出的通知，传递State的变化。

action的例子：

const action = {
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    };

可以看出，Action本质上其实就是JS普通的对象。  
我们约定，action内必须使用一个字符串类型的type表示将要执行的动作。除了type字段之外，action对象的结构完全由自己决定。

使用方法store.dispatch()，向store发送action。

import { createStore } from 'redux';
    const store = createStore(fn);
    
    store.dispatch({
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    });

# Reducer #

当store收到Action，知道了将会有什么事情发生这件事，就要利用reducer函数来更新state。

Reducer接收Action和当前的State作为参数，返回一个新的State。

const reducer = function (state, action) {
      // ...
      return new_state;
    };

在实际应用中，Reducer不用开发者来手动调用，store.dispatch方法会触发 Reducer 的自动执行。

为此在建立Store的时候，需要传入Reducer函数作为参数。

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

这样，当每次调用store.dispatch发送新的Action的时候，就会自动调用reducer函数，更新state。

Reducer函数还有一个很重要的特征：它是一个纯函数。  
什么是纯函数呢？就是，在任意两次函数的运行过程中，只要是同样的输入，必定要得到同样的输出。

纯函数一定遵守下面几点约束：

不得改写参数
    不能调用系统 I/O 的API
    不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

# Redux的工作流程 #

![这里写图片描述][SouthEast]

工作流程：  
1、用户发出Action。

store.dispatch(action);

2、Store调用Reducer，传入当前state和Action，Reducer会返回新的State。

3、State发生变化，Store就会调用监听函数。监听函数中，可以通过store.getState()得到当前状态。在React框架中，就可以触发重新渲染View了。

[http_www.ruanyifeng.com_blog_2016_09_redux_tutorial_part_one_basic_usages.html]: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
[SouthEast]: /images/20220613/f868ee9d8d2643fa854a11196d780f78.png