如何在 reducer 之间共享 state?

简介: 如何在 reducer 之间共享 state?

如何在 reducer 之间共享 state?

 combineReducers(reducers)

reducers (Object): 一个对象,它的值(value)对应不同的 reducer 函数,这些 reducer 函数后面会被合并成一个。

随着应用变得越来越复杂,可以考虑将 reducer 函数拆分成多个单独的函数,拆分后的每个函数负责独立管理 state 的一部分。

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// rootReducer 将返回如下的 state 对象
{
  potato: {
    // 由 potatoReducer 管理的 state 对象 ...
  },
  tomato: {
    // 由 tomatoReducer 管理的 state 对象 ...
  }
}

那么问题来了,将 reducer 函数拆分成多个单独的函数,reducer 之间无法共享 state 怎么办呢?(由 potatoReducer 管理的 state 对象与由 tomatoReducer 管理的 state 对象,无法获取对方的 state 值)。首先最简单的办法是不要将 reducer 函数拆分成多个单独的函数,而是只使用一个 reducer 函数,就不会出现这个问题了。

标准的做法是使用 Redux Thunk 中间件。要引入 redux-thunk 这个专门的库才能使用。在 redux-thunk 的 异步 action 创建函数能通过 getState() 方法获取所有的 state。

export function fetchPostsIfNeeded(subreddit) {
  // 注意这个函数也接收了 getState() 方法
  // 它让你选择接下来 dispatch 什么。

  return (dispatch, getState) => {
    // todo...
  }
}

只需牢记 reducer 仅仅是函数,可以随心所欲的进行划分和组合,而且也推荐将其分解成更小、可复用的函数。

相关文章
|
消息中间件 存储 Kafka
Flink---11、状态管理(按键分区状态(值状态、列表状态、Map状态、归约状态、聚合状态)算子状态(列表状态、广播状态))
Flink---11、状态管理(按键分区状态(值状态、列表状态、Map状态、归约状态、聚合状态)算子状态(列表状态、广播状态))
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
|
1天前
|
存储 监控 JavaScript
Vuex 中 State 的作用
【10月更文挑战第15天】State 是 Vuex 状态管理体系中的核心组成部分,它为应用提供了可靠的数据共享和管理机制,保障了应用的正常运行和良好体验。理解和正确使用 State 是掌握 Vuex 状态管理的关键,对于构建复杂、高效的 Vue 应用具有重要意义。
|
2月前
|
存储 缓存 分布式计算
Reducer 之间如何通信?
【8月更文挑战第31天】
26 1
|
2月前
|
存储 Python
set() 和 freezeset() 之间有什么区别?
【8月更文挑战第29天】
23 6
|
5月前
在Vuex中,如何处理不同模块之间的状态同步?
在Vuex中,如何处理不同模块之间的状态同步?
55 1
|
5月前
v-model绑定vuex的state怎么实现?
v-model绑定vuex的state怎么实现?
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
5月前
|
存储 JavaScript
如果需要在组件之间共享一个`ref`,应该如何实现?
如果需要在组件之间共享一个`ref`,应该如何实现?
67 0
|
5月前
props和state相同点和不同点?render方法在哪些情况下会执行?
props和state相同点和不同点?render方法在哪些情况下会执行?
36 0