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由这些中间件触发