打造Redux中间件

2024年4月21日 185次阅读 来源: 小红星闪啊闪

简单的

基本中间件：

const customMiddleware = store => next => action => {
    if(action.type !== 'CUSTOM_ACT_TYPE') {
        return next(action)
        // 其他代码
    }
}

使用：

import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import customMiddleware from './customMiddleware';

const store = createStore(reducer, applyMiddleware(customMiddleware));

store => next => action =>看起来很复杂有木有。基本上你是在写一个一层一层往外返回的方法，调用的时候是这样的：

let dispatched = null;
let next = actionAttempt => dispatched = actionAttempt;

const dispatch = customMiddleware(store)(next);

dispatch({
  type: 'custom',
  value: 'test'
});

你做的只是串行化的函数调用，并在每次的调用上传入适当的参数。当我第一次看到这个的时候，我也被这么长的函数调用串惊呆了。但是，在读了编写redux测试之后就理解是怎么回事了。

所以现在我们理解了函数调用串是怎么工作的了，我们来解释一下这个中间件的第一行代码：

if(action.type !== 'custom') {
    return next(action);
}

应该有什么办法可以区分什么action可以被中间件使用。在这个例子里，我们判断action的type为非custom的时候就调用next方法，其他的会传导到其他的中间件里知道reducer。

来点酷的

redux的官方指导里有几个不错的例子，我在这里详细解释一下。

我们有一个这样的action：

dispatch({
  type: 'ajax',
  url: 'http://some-api.com',
  method: 'POST',
  body: state => ({
    title: state.title,
    description: state.description
  }),
  cb: response => console.log('finished', response)
})

我们要实现一个POST请求，然后调用cb这个回调方法。看起来是这样的:

import fetch from 'isomorphic-fetch'

const ajaxMiddleware = store => next => action => {
    if(action.type !== 'ajax') return next(action);

    fetch(action.url, {
        method: action.method,
        body: JSON.stringify(action.body(store.getState()))
    }).then(response => response.json())
    .then(json => action.cb(json))
}

非常的简单。你可以在中间件里调用redux提供的每一个方法。如果我们要回调方法dispatch更多的action该如何处理呢？

.then(json => action.cb(json, store.dispatch))

只要修改上例的最后一行就可以搞定。

然后在回调方法定义里，我们可以这样：

cb: (response, dispatch) => dispatch(newAction(response))

As you can see, middleware is very easy to write in redux. You can pass store state back to actions, and so much more. If you need any help or if I didn’t go into detail enough, feel free to leave a comment below!

如你所见，redux中间件非常容易实现。

原文地址：https://reactjsnews.com/redux…

    原文作者：小红星闪啊闪
    原文地址: https://segmentfault.com/a/1190000008534473
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞