存储状态
state
获取状态
getState
更新状态
dispatch
变更订阅
subscribe
自定义redux中间件：
kRedux.js
export function createStore(reducer, enhancer){
if (enhancer) {
return enhancer(createStore)(reducer)
}
// 保存状态
let currentState = undefined;
// 回调函数
let currentListeners = [];
function getState(){
return currentState
}
function subscribe(listener){
currentListeners.push(listener)
}
function dispatch(action){
currentState = reducer(currentState,action)
currentListeners.forEach(v=>v())
return action
}
dispatch({type:'@@OOO/KKB-REDUX'})
return {
getState,
subscribe,
dispatch
}
}
异步：
Redux
只是个纯粹的状态管理器，默认只⽀持同步，实现异 步任务 ⽐如延迟，⽹络请求，需要中间件的⽀持，⽐如我们 试⽤最简单的redux-thunk
和
redux-logger
。 中间件就是⼀个函数，对store.dispatch
⽅法进⾏改造， 在发出 Action
和执⾏
Reducer
这两步之间，添加了其他功 能。
npm
install redux-thunk redux-logger
--save
应⽤中间件，
store.js
import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import counterReducer from './counterReducer'
const store = createStore(counterReducer,applyMiddleware(logger, thunk));
使⽤异步操作时的变化，
ReactReduxPage.js
asyAdd = () => {
store.dispatch(dispatch => {
setTimeout(() => {
dispatch({type: "ADD"});
}, 1000);
});
};
中间件实现：
核⼼任务是实现函数序列执⾏。
//
把下⾯加⼊
kRedux.js
export function applyMiddleware(...middlewares) {
// 返回强化以后函数
return createStore => (...args) => {
const store = createStore(...args)
let dispatch = store.dispatch
const midApi = {
getState:store.getState,
dispatch:(...args)=>dispatch(...args)
}
// 使中间件可以获取状态值、派发action
const middlewareChain = middlewares.map(middleware => middleware(midApi))
// compose可以middlewareChain函数数组合并成⼀个函数
dispatch = compose(...middlewareChain) (store.dispatch)
return {
...store,
dispatch
}
}
}
export function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) =>a(b(...args)))
}
redux-logger
原理
打日志：
function logger() {
return dispatch => action => {
// 中间件任务
console.log(action.type + "执⾏了！");
return dispatch(action);
};
}
const store = createStore(counterReducer,applyMiddleware(logger));
redux-thunk
原理
thunk
增加了处理函数型
action
的能⼒
function thunk({ getState }) {
return dispatch => action => {
if (typeof action === "function") {
return action(dispatch, getState);
} else {
return dispatch(action);
}
};
}
const store = createStore(counterReducer,applyMiddleware(thunk,logger));
原文：视频讲解笔记
