• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

终极版中间件的认识指导

redux 来源:DarkArtistry 5次浏览
const store = createStore(
    rootReducer, 
    initialState, 
    compose(
     applyMiddleware(thunk, api, wsMiddleware, createLogger()), 
     typeof window === 'object' && typeof window.devToolsExtension !== 
'undefined' 
     ? window.devToolsExtension() 
     : DevTools.instrument(), 
    ), 
); 

所以上面的是你怎么通常会创建一个存储,然后你有你的中间件,它开始像这样:终极版中间件的认识指导

export default store => next => (action) => { 

我看过了,从终极版中间件部分。 org,但任何人都能更好地向我解释这是怎么回事?

那么中间件是否正在接收商店?并从商店中调用下一个函数,最后使用作为动作给出的参数(在这种情况下)。 ?

===========解决方案如下:

的终极版中间件管道可以细分这样的…

store => {...}

商店API是提供给管道的第一个参数。这允许中间件在流水线中的任何点获得当前状态和/或将新动作分派到商店中。

注:它具有许多与从createStore函数返回的商店相同的特性,但它不尽相同。只有dispatchgetState功能可用。

next => {...}

next参数是对链中的下一个中间件参考。如果没有更多的中间件要去,那么商店会处理这个动作(即将它传递给reducer)。

如果next未被调用,则该操作不会使其进入reducer。这可以有效地抑制某些不是有效操作的东西,比如函数或承诺,因为如果Redux尝试处理它,则会引发错误。

action => {...}

action说法是,被分派到商店的东西。

{…}

在这里你将测试action,看看是否有你想用它和你是否将它传递到next处理程序做一些特别的东西。

一个例子

在这个例子中,我们将创建一个简单的thunk middleware,解释它如何使用管道的各个部分。

export default store => next => action => { 

    // if the action is a function, treat it as a thunk 
    if (typeof action === 'function') { 

    // give the store's dispatch and getState function to the thunk 
    // we want any actions dispatched by the thunk to go through the 
    // whole pipeline, so we use the store API dispatch instead of next 
    return action(store.dispatch, store.getState) 
    } else { 

    // we're not handling it, so let the next handler have a go 
    return next(action) 
    } 
} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)