前言
在编写 Redux 应用程序时,有时需要跳过某些不需要处理的 Action,例如在处理登录相关的 Action 时,如果用户已经登录,可能需要跳过一些登录相关的 Action。Redux 原生并不支持跳过 Action,但是可以使用 npm 包 redux-skip-by-action 实现这个功能。
使用 redux-skip-by-action
安装 redux-skip-by-action 包。
npm install redux-skip-by-action
在 Redux createStore 中引入中间件。
import { createStore, applyMiddleware } from 'redux'; import skipMiddleware from 'redux-skip-by-action'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(skipMiddleware));
在 Action 中添加
skip
属性以及判断条件。-- -------------------- ---- ------- ------ ----- ------------- - ---------------- ------ ----- ------------- - ---------------- ------ ----- ------------- - ---------------- ------ -------- --------------- --------- - ------ ---------- --------- -- - -- ------------------------------------------- - ------ ---------- ----- ---------- -- - ---------- ----- ------------- --- -------------------------- --------------- ---- -- - ---------- ----- -------------- ---- --- --------------------------- -- ----- -- - ---------- ----- -------------- ----- --- - -- -- -
在 reducer 中添加 Action 处理逻辑。
-- -------------------- ---- ------- ------ - ----------- -------------- -------------- ------------- - ---- ---------------------------- ----- ------------ - - ---------------- ----- -- ------ ------- -------- -------------------- - ------------- ------- - ------ ------------- - ---- -------------- ------ - --------- ---------------- ----- -- ---- -------------- ------ - --------- ---------------- ----- ----- ----------- -- ---- -------------- ------ - --------- ---------------- ------ ------ ------------ -- ---- ----------- ------ ------ -------- ------ ------ - -
指导意义
使用 redux-skip-by-action 包可以使 Redux 应用程序更加高效、可维护和可扩展。跳过不需要处理的 Action 可以提高应用程序的性能,减少不必要的处理。同时,使用 skip
属性和判断条件也可以使代码更加清晰和易于理解。
示例代码
完整的示例代码可以在 GitHub 上查看。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b8f