终极版;通过 combineReducers 使用组合化简器时访问状态的其他部分
Redux; accessing other parts of the state when using composed reducers via combineReducers
更新
感谢@Dominic Tobias 和@gabdallah 发现了我令人尴尬的错误。
正确答案当然是;
so try checking action.payload
.
关于 switch 语句和操作对象的其他评论,我们指的是我在示例中犯的错误,我已经更正了这些错误。
假设我组合了以下两个减速器;
import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import entries from './entries'
export default combineReducers({
router: routerStateReducer,
entries
})
在这种情况下,我想根据全局状态的另一部分改变条目状态; redux-router 提供的路由器状态,例如为了实现分页。
我怎么能做这样的事情?
// entries.js
import { ROUTER_DID_CHANGE } from 'redux-router/lib/constants'
const initialState = {}
function entries (state = initialState, action) {
switch (action.type) {
case ROUTER_DID_CHANGE:
// How can I access `state.router` here in order to do something like this;
if (routerState.location.pathname === '/entries') {
return {
...state,
page: routerState.location.query.page || state.page,
limit: routerState.location.query.limit || state.limit
}
}
return state
}
}
想到的其他一些方法;
- 将路由器状态连接到
Entries
路由组件,使用 componentWillMount 生命周期方法检查路由器状态并使用页面和限制值依次改变条目状态调用动作创建器。这行得通;但是我使用一些转换中间件在安装之前调用路由组件上的静态 fetchData
方法,所以数据被获取,然后分页动作创建者将被调用;不是期望的行为。
- 在其他地方(即专用路由器 redux 模块)收听路由器操作,在条目存储上调用操作创建器,但我不确定这与 redux-router 的匹配程度如何,或者我将如何访问全局存储的路由器部分。
- 根本不要这样做;只需在静态 fetchData 方法中查询路由器状态
其他有用的信息;
有问题的实现是受 react-redux-universal-hot-example 启发很大的 Universal App
相关部门
- 反应 0.14.2
- redux 3.0.3
- 反应路由器 1.0.0-rc3
- redux-路由器 1.0.0-beta3
我怎样才能实现这种或类似的行为?我是否以正确的方式思考这个问题?
过去,在事情变得简单之前,开发人员会在历史对象上监听 popstate 事件;)
看起来要求的信息是关于操作的?
history.listen((error, nextRouterState) => {
...
store.dispatch(routerDidChange(nextRouterState));
和操作:
export function routerDidChange(state) {
return {
type: ROUTER_DID_CHANGE,
payload: state
};
}
所以尝试检查 action.payload
。
但是你的 switch 语句使用的是 action
而不是 action.type
所以那里有些可疑。你也不应该需要做 action = {}
- 见 http://redux.js.org/docs/basics/Reducers.html
更新
感谢@Dominic Tobias 和@gabdallah 发现了我令人尴尬的错误。
正确答案当然是;
so try checking
action.payload
.
关于 switch 语句和操作对象的其他评论,我们指的是我在示例中犯的错误,我已经更正了这些错误。
假设我组合了以下两个减速器;
import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import entries from './entries'
export default combineReducers({
router: routerStateReducer,
entries
})
在这种情况下,我想根据全局状态的另一部分改变条目状态; redux-router 提供的路由器状态,例如为了实现分页。
我怎么能做这样的事情?
// entries.js
import { ROUTER_DID_CHANGE } from 'redux-router/lib/constants'
const initialState = {}
function entries (state = initialState, action) {
switch (action.type) {
case ROUTER_DID_CHANGE:
// How can I access `state.router` here in order to do something like this;
if (routerState.location.pathname === '/entries') {
return {
...state,
page: routerState.location.query.page || state.page,
limit: routerState.location.query.limit || state.limit
}
}
return state
}
}
想到的其他一些方法;
- 将路由器状态连接到
Entries
路由组件,使用 componentWillMount 生命周期方法检查路由器状态并使用页面和限制值依次改变条目状态调用动作创建器。这行得通;但是我使用一些转换中间件在安装之前调用路由组件上的静态fetchData
方法,所以数据被获取,然后分页动作创建者将被调用;不是期望的行为。 - 在其他地方(即专用路由器 redux 模块)收听路由器操作,在条目存储上调用操作创建器,但我不确定这与 redux-router 的匹配程度如何,或者我将如何访问全局存储的路由器部分。
- 根本不要这样做;只需在静态 fetchData 方法中查询路由器状态
其他有用的信息;
有问题的实现是受 react-redux-universal-hot-example 启发很大的 Universal App
相关部门
- 反应 0.14.2
- redux 3.0.3
- 反应路由器 1.0.0-rc3
- redux-路由器 1.0.0-beta3
我怎样才能实现这种或类似的行为?我是否以正确的方式思考这个问题?
过去,在事情变得简单之前,开发人员会在历史对象上监听 popstate 事件;)
看起来要求的信息是关于操作的?
history.listen((error, nextRouterState) => {
...
store.dispatch(routerDidChange(nextRouterState));
和操作:
export function routerDidChange(state) {
return {
type: ROUTER_DID_CHANGE,
payload: state
};
}
所以尝试检查 action.payload
。
但是你的 switch 语句使用的是 action
而不是 action.type
所以那里有些可疑。你也不应该需要做 action = {}
- 见 http://redux.js.org/docs/basics/Reducers.html