是否可以创建一个访问状态树的多个分支的选择器?
Is it possible to create a selector that accesses multiple branches of the state tree?
我正在开发一个 Redux 项目,其中包含一组组合的 reducer
const rootReducer = combineReducers({
reducer1,
reducer2,
...
});
reducer 每个更新商店的一个分支
sampleStore = {
reducer1: {a1: 7, b1: 5, c1: 6, ...},
reducer2: {a2: 3, b2: 2, c2: 9, ...},
reducer3: {a3: 1, b3: 4, c3: 2, ...},
...
}
现在我正在尝试添加需要访问商店的两个分支的逻辑,而无需重构整个项目。例如,我想要一个具有执行能力的减速器:set c3 = f(a1, a2)
.
目前我正在尝试使用重新选择,但我迷路了。在 reducer1/selector.js 我有
export const derivedVariableSelector = createSelector(
a1Selector,
a2Selector,
(a1, a2) => a1 + a2
);
我正在尝试创建一个减速器
function setC3(state) {
return Object.assign({}, state, {
c3: state.c3 + derivedVariableSelector(state)
});
}
但是,调用 setC3 时,derivedVariableSelector 永远不会收到足够的存储来完成其工作。它要么接收包含 a1 的分支,要么接收包含 a2 的分支,但我不知道有什么方法可以同时提供两者。这可能吗?
简短的回答是 "No",只要您使用 combineReducers
组合所有减速器。
较长的答案取自 redux documentation:
The combineReducers utility included with Redux is very useful, but is
deliberately limited to handle a single common use case: updating a
state tree that is a plain Javascript object, by delegating the work
of updating each slice of state to a specific slice reducer. It does
not handle other use cases, such as a state tree made up of
Immutable.js Maps, trying to pass other portions of the state tree as
an additional argument to a slice reducer, or performing "ordering" of
slice reducer calls. It also does not care how a given slice reducer
does its work.
The common question, then, is "How can I use combineReducers to handle
these other use cases?". The answer to that is simply: "you don't -
you probably need to use something else". Once you go past the core
use case for combineReducers, it's time to use more "custom" reducer
logic, whether it be specific logic for a one-off use case, or a
reusable function that could be widely shared.
文档的同一页上有一些针对 how the create reducers that share more of the state 的建议,但它会比 comibineReducers
更手动一些。
我自己以前没有尝试过这样的事情,但是按照文档中的例子,这样的事情可能对你有用:
import { combineReducers } from 'redux'
import reduceReducers from 'reduce-reducers'
const reducer1 = (state = {}, action) => {
switch (action.type) {
// handle actions
default:
return state
}
}
const reducer2 = (state = {}, action) => {
switch (action.type) {
// handle actions
default:
return state
}
}
const reducer3 = (state) => {
return {
...state,
// use the root state for the reducerC value
reducerC: makeValue(state.reducer1, state.reducer2)
}
}
const rootReducer = reduceReducers(combineReducers({reducer1, reducer2}), reducer3)
这使用库 reduce-reducers 以不同的方式组合减速器。
我正在开发一个 Redux 项目,其中包含一组组合的 reducer
const rootReducer = combineReducers({
reducer1,
reducer2,
...
});
reducer 每个更新商店的一个分支
sampleStore = {
reducer1: {a1: 7, b1: 5, c1: 6, ...},
reducer2: {a2: 3, b2: 2, c2: 9, ...},
reducer3: {a3: 1, b3: 4, c3: 2, ...},
...
}
现在我正在尝试添加需要访问商店的两个分支的逻辑,而无需重构整个项目。例如,我想要一个具有执行能力的减速器:set c3 = f(a1, a2)
.
目前我正在尝试使用重新选择,但我迷路了。在 reducer1/selector.js 我有
export const derivedVariableSelector = createSelector(
a1Selector,
a2Selector,
(a1, a2) => a1 + a2
);
我正在尝试创建一个减速器
function setC3(state) {
return Object.assign({}, state, {
c3: state.c3 + derivedVariableSelector(state)
});
}
但是,调用 setC3 时,derivedVariableSelector 永远不会收到足够的存储来完成其工作。它要么接收包含 a1 的分支,要么接收包含 a2 的分支,但我不知道有什么方法可以同时提供两者。这可能吗?
简短的回答是 "No",只要您使用 combineReducers
组合所有减速器。
较长的答案取自 redux documentation:
The combineReducers utility included with Redux is very useful, but is deliberately limited to handle a single common use case: updating a state tree that is a plain Javascript object, by delegating the work of updating each slice of state to a specific slice reducer. It does not handle other use cases, such as a state tree made up of Immutable.js Maps, trying to pass other portions of the state tree as an additional argument to a slice reducer, or performing "ordering" of slice reducer calls. It also does not care how a given slice reducer does its work.
The common question, then, is "How can I use combineReducers to handle these other use cases?". The answer to that is simply: "you don't - you probably need to use something else". Once you go past the core use case for combineReducers, it's time to use more "custom" reducer logic, whether it be specific logic for a one-off use case, or a reusable function that could be widely shared.
文档的同一页上有一些针对 how the create reducers that share more of the state 的建议,但它会比 comibineReducers
更手动一些。
我自己以前没有尝试过这样的事情,但是按照文档中的例子,这样的事情可能对你有用:
import { combineReducers } from 'redux'
import reduceReducers from 'reduce-reducers'
const reducer1 = (state = {}, action) => {
switch (action.type) {
// handle actions
default:
return state
}
}
const reducer2 = (state = {}, action) => {
switch (action.type) {
// handle actions
default:
return state
}
}
const reducer3 = (state) => {
return {
...state,
// use the root state for the reducerC value
reducerC: makeValue(state.reducer1, state.reducer2)
}
}
const rootReducer = reduceReducers(combineReducers({reducer1, reducer2}), reducer3)
这使用库 reduce-reducers 以不同的方式组合减速器。