引言
首先我是一个菜鸡，对redux的掌握还只是停留在能使用层面，这里只是记录一下我的这个react博客的redux是如何使用，算是温故知新吧。如果想了解redux还是推荐看官方文档，还有一篇大佬写的一步一步教你理解redux在react的使用原理，推荐一看
直接上代码
configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import { test1 } from '../middlewares'
import reducers from '../reducer';
import createHistory from 'history/createBrowserHistory';
export const history = createHistory()
export function configureStore(initialState){
return createStore(
reducers,
initialState,
compose(
applyMiddleware(..._getMiddleware()),
)
)
}
function _getMiddleware() {
let middleware = [
routerMiddleware(history),
test1,
thunk,
];
return middleware;
其中createStore方法就是返回一个store的初始化方法，在app的index.js中初始化store; 而applyMiddleware就是一个应用中间件的方法，中间件middle发生在dispatch action之后，到达reduce之前；
compose（...funcs）(...args) 就会return一个对funcs数组进行reduce的结果，其中初始对象为last（...args）
compose(f, g, h)(...args) => f(g(h(...args))).
applyMiddleware 和 compose的搭配就完成的所有middle的链式调用。
这里说一说中间件middle吧，为什么是store=>next=>action=>{}这样是形式的：
export default store => next => action => {
let pre = store.getState();
let state = next(action)
let now = store.getState();
return state;
}
在applyMiddleware 源码中
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
chain = middlewares.map(middleware => middleware(middlewareAPI))这一步将已经将middle的store参数赋值了， 而dispatch = compose(...chain)(store.dispatch)中，将store.dispatch也赋值给了第一个middle的参数next， 所有中间件就是如fn3(fn2(fn1(store.dispatch))), 最终的dispatch变成了这样被各种强化的大佬dispatch，有点像koa的洋葱中间件。 next就是更深一层的middle的dispatch，而最初的next就是我们最开始的store.dispatch。
演示一套流程看看
我在某个组件dispatch了一个action
// 我们假设middle都是下面这样的，只是编号不同
export default store => next => action => {
console.log('i am 1 pre')
let state = next(action)
console.log('i am 1 now')
return state;
}
// this.props.dispatch(action)也就是执行下面这一套
fn3(fn2(fn1(store.dispatch)))(action);
//那最终的输出是这样的
// i am 3 pre
// i am 2 pre
// i am 1 pre
// i am 1 now
// i am 2 now
// i am 3 now
偷一个图看看
thunk
说完了middle，那thunk就非常好理解了
thunk就是一个if判断而已，因为异步的dispatch，还拿不到request的结果，所以只能给一个函数，一般是this.props.dispatch(action)， 参数是一个action，如{type: "ADD", payload: {this.props.sum+1}}, 而thunk做的，就是然dispatch 不仅能接收一个action， 还可以不用action，而是传入一个已dispatch为参数的函数，如这样dispatch=>{do some thing you want}
这样的话，我们就是可以做好一些东西了
ajax UTIL
像我封装好的ajax请求工具就是和redux结合好的
// 这里是一个柯西化的 index.js
const createAjaxAction = (handle, start, end) => (url, method, Data, cb) =>(dispatch)=>{
start&&dispatch(start)
handle(url, method, Data).then(res=>{
end&&dispatch(end)
cb&&cb(res)
}).catch(err=>{
console.error(err)
})
}
export {
createAjaxAction
}
// 这里是我配置好的axios 的请求方法 instance是一个axios实例 ajax.js
function request(url, method, Data){
return instance[method](apiUrl + url, Data)
}
export {
request
}
// 最终将他两个整合 httpAction.js
import { createAjaxAction } from './index';
import {request as ajax} from "./ajax";
const start = {type: 'LOAD', payload: {load: true}}
const end = {type: 'LOAD', payload: {load: false}}
const httpAction = createAjaxAction(ajax, start, end)
export default httpAction;
在最终使用的时候是像下面这样的
this.props.dispatch(httpAction('www.example.com/api', 'get', null, callback))；我就可以在callback中拿到请求数据，进行this.setState或者进行同步的this.props.dispatch(action)；
每个网络请求中，都会进行是否在load的dispatch，来进行用户的loading显示；
好的，我的此博客的redux运用就是如此了，如果想要看源码的话，其实也就是这个博客网站的react源码，就在我的github上