Question

我写了一个中间件，就像打击：

const testMiddleware = ({ dispatch, getState }) => next => action => {
    console.log('test middleware')
};

export default testMiddleware;

并将其添加到我的商店中：applyMiddleware(testMiddleware)在行动中，我在控制台中获得了test middleware。

我写了一个简单的动作，像这样：

export const sayHi = () => {
    return dispatch => {
        console.log('hi');
    }
}

如何在中间件中调度sayHi操作？

Answer 1

中间件将商店的getState（）和dispatch（）函数作为第一个参数，因此您可以执行以下操作（在导入所需的操作之后）：

const middleware = ({dispatch, getState }) =>{
    return next => action => {
        dispatch(someAction);
        // return data;
        return next(action);
  }
}

因此，中间件签名是（{getState，dispatch}）=> next =>操作。

https://redux.js.org/api/applymiddleware

Answer 2

我们假设使用以下中间件：

const middleware = ({ getState }) =>{
    return next => action => {
        console.log('My actions is', action)

        const data = next(action)

        console.log('After update :' + getState())

   return data
  }
}

好吧，我们准备好在applyMiddleware中应用它，现在每次我们调度一个动作时，它将被刚创建的自定义中间件拦截。

store.dispatch({
    type: 'MY_ACTION',
    text: 'Will trigger middleware'
})

该操作将作为参数传递给您的中间件，该中间件将执行某些操作（在本例中为日志），最后使用next()分派该操作

如何在Redux中间件中调度动作？

2 个答案: