此博客的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上