学习Redux,理解Redux中的同步和异步Action

6,475 阅读2分钟

Redux 基本概念

Redux是什么?
  • state管理工具
  • 2KB大小
  • 主要在react中使用,也可以在其他js framework中使用
  • 所有的state放在唯一一个store里面,需要的时候可以从store中取
为什么需要redux?
  • 跨component实现state共享(尤其是兄弟组件之间,没有redux需在父组件中写一个状态,让兄弟组件共享这个状态)
  • 某个状态需要在任何地方都可以拿到
  • 一个组件需要改变全局状态
  • 一个组件需要改变另一个组件的状态
Redux几个概念
  • store: 存放整个应用的state,每个组件都能读取store中的任何一个state
//创建store
import { createStore } from 'redux';
const store = createStore(fn);

//读取state
const state = store.getState()
 
  • action:事件,是view往store里传数据的唯一途径,通过store.disptach()方法触发,一般会写个action creator的函数根据动态数据来生成action
const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');
  • reducer: 纯函数,返回一个新的state,是上面action执行后产生的新的state---Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
// createStore需要提供getState, dispatch 和 subscribe方法,这个简单实现可以方便理解reducer的作用
const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;
  // 此处理解下reducer
  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};

流程图

Redux 中的技术点
  • WithRouter连接Action和reducer,是通过react的HOC( High Order Component)实现的
  • 函数式编程:Redux的reducer必须是纯函数,而store和action应该是不可变的,复制state一定程度损失了性能,但是毫秒级别,可以忽略

同步action的处理

Redux的教程中反复使用todo列表的例子,那就是个典型的同步action,每当disptach action时,state就会被立即更新(当然setState是异步的

异步action的处理

  • 以API请求数据为例,request 和receive需要定义成两个不同的action,用户trigger的是request,api回调trigger receive-- 参考官方文档
  • 一般异步处理都会使用中间件,比如redux-thunk或者redux-saga,他们做的事情是包装dispatch,request action由view触发,receive action由这些中间件触发