redux ajax全局事件,此博客的redux运用

引言

首先我是一个菜鸡，对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

偷一个图看看

middle.png

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上