Redux基础

redux的设计思想

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

通俗的说就是将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是很有帮助的。

redux的设计思想

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

猜你喜欢