什么是复合 Reducer
在 Redux 应用中,Reducer 是用来处理应用中不同 state 的函数。Reducer 接收两个参数,第一个参数是当前的 state,第二个参数是要执行的 action。Reducer 返回新的 state,更新应用中的状态。
然而,在实际应用中,我们可能需要处理多个 state,每个 state 对应不同的页面或功能。这时,单个 Reducer 的功能会变得受限,因为单个 Reducer 可能变得过于复杂。Redux 提供了复合 Reducer 的方式来解决这个问题。
复合 Reducer 即 combineReducer,它是 Redux 提供的一个工具函数,用于将多个 Reducer 合成一个父级 Reducer,方便管理应用的不同状态。
如何使用
我们可以通过下面的方式使用 combineReducers() 函数:
import { combineReducers } from 'redux'; const rootReducer = combineReducers({ state1: reducer1, state2: reducer2, });
combineReducers() 函数接收一个对象作为参数,这个对象的 key 是 state 项的名称,value 是对应的 reducer 函数。最终,combineReducers() 函数会返回一个新的函数,这个函数为整个应用的 state 服务。
假设现在我们有一个简单的 Count 应用,我们希望将 Count 页面和 Message 页面的状态分开管理,那么可以如下实现:
-- -------------------- ---- ------- -- --------------- ----- ------------ - ------ - - ------ - -- ------- -- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - -- ------ ------- ------------- -- ----------------- ----- -------------- - ------ - - -------- -- -- ------- -- - ------ ------------- - ---- -------------- ------ - -------- -------------- -- -------- ------ ------ - -- ------ ------- --------------- -- -------------- ------ - --------------- - ---- -------- ------ ------------ ---- ----------------- ------ -------------- ---- ------------------- ----- ----------- - ----------------- ------ ------------- -------- --------------- --- ------ ------- ------------展开代码
在组件中使用
在组件中,我们可以使用 react-redux 提供的 connect() 函数来连接应用的 state 和组件的 props,示例代码如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ----- ----- ------- --------------- - -------- - ----- - ------ ---------- --------- - - ----------- ------ - ----- ------- ------------------------------ -------------------- ------- ------------------------------ ------ -- - - ----- --------------- - ----- -- -- ------ ------------------ --- ----- ------------------ - - ---------- -- -- -- ----- ----------- --- ---------- -- -- -- ----- ----------- --- -- ------ ------- ------------------------ ---------------------------展开代码
总结
使用 Redux 管理应用状态是一个不错的选择。使用 combineReducer,我们可以将多个 Reducer 管理的 state 组合在一起,方便管理应用状态。
在使用 Redux 的时候,建议遵循一个 Reducer 管理一个 state 的原则,这样可以保证代码的简洁,易于维护。同时也要注意使用好 Redux 提供的工具函数,如 combineReducers 和 connect,它们会大大提高我们的工作效率。
完整示例代码请参考:https://github.com/kaysonwu/react-redux-tutorial。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/646dcb58968c7c53b0c6bfa4