Redux基础

古城微笑少年丶 2022-05-26 04:09 192阅读 0赞

*  [react…目录][react]

--------------------

### redux的设计思想 ###

1. Web 应用是一个状态机，视图与状态是一一对应的。 2. 所有的状态，保存在一个对象里面。

通俗的说就是将web页面和数据绑定，由每一次数据的变更来触发web页面的改变。一个简单的流程是这样的，通过需求（事件）触发redux内数据的变化，数据变化再触发web界面进行相应的变化。所以redux是单向流的操作，由数据驱动界面。

### 使用一个简单redux需要知道几个基本的概念 ###

store，state，action，store.dispatch()，Reducer，store.subscribe(listener) 1. store store就是redux保存数据的一个实体及操作对象，且整个应用有且只有一个。里面数据存储的方式是以键值对的方式存储的。首先我们要知道的是生成store的方式就可以了： \`\`\` import \{ createStore \} from 'redux'; const store = createStore(fn); \`\`\` 2.State state是store内部数据的一次快照。有点抽象，简单的来说就是在某一时刻store中存储的所有数据。通过store.getState()方式获取。它的意义在于当store内数据改变并驱动组件（web视图的基本单位）进行改变时，组件要得到当前最新的数据（state）,依照数据进行相应的变化。所以很重要的一点就是store必须 **直接或间接**传给任何一个(需要数据的)组件才能获取的到state。

3.action与store.dispatch()  
之前说了redux的工作流程是store内数据（state）的变化来触发组件的变化。但是我们无法直接改变store内的数据的，要修改store内部的数据redux提供了唯一的一个方法**store.dispatch(action)**。store.dispatch就是一个函数没什么好多说的了，就是把action对象发送给store。主要是action，action本质就是一个普通的对象而已。这个对象特殊在于它必须有一个属性type，也就是上文中提到的action.type**（type的值是"键"的含义，目的是告诉store要处理什么数据，怎么处理）**。然后就是要给这个对象加上其它所需的数据。  
示例：

store.dispatch({
      type: 'ADD_ONE',
      selfdata: '1'
    });

4.Reducer  
当store接收到action后便要根据action的内容处理数据，reducer就是处理数据的函数，直接上代码：

import { createStore } from 'redux';
    
    const defaultState = 0;
    const reducer = function(state = defaultState, action){
      switch (action.type) {
        case 'ADD_ONE':
          return state + action.selfdata;
        default: 
          return state;
      }
    };
    const store = createStore(reducer);
    
    store.dispatch({
      type: 'ADD',
      selfdata: 1
    });

reducer函数作为createStore的参数传递给store，当store.dispatch执行后，store就会调用reducer函数，reducer函数里面定义的就是处理数据方式。返回值就是当前最新的state。  
5.store.subscribe(listener)  
store.subscribe(listener)是监听函数，当store执行reducer，数据被改变后，就会调用listener函数。listener函数由用户自定义数据改变后需要进行的操作，即触发组件更新。例：

let unsubscribe = store.subscribe(() =>
          console.log(store.getState())
        );
        //执行该方法解除监听
        unsubscribe();

总结：  
一个简单的redux流程大致就是这样：

1.  用户触发事件调用store.dispatch(action)
2.  store调用reducer函数根据action处理数据
3.  数据改变触发store调用监听函数执行listener方法改变web视图

当然真实的项目中还要进行一系列的封装处理，这么简单的流程无法满足一些需求。比如需要写多个reducer来处理数据，还要根据不同的数据的变化更新特定的组件等等。但是再复杂的流程都是从这个最基本的流程扩展出来的，理解了这个流程，把握住它的原理对理解今后项目中被封装后的redux是很有帮助的。

[react]: https://blog.csdn.net/u014296316/article/details/85484043