还原;通过 combineReducers 使用组合减速器时访问状态的其他部分 [英] Redux; accessing other parts of the state when using composed reducers via combineReducers

问题描述

更新

感谢@Dominic Tobias 和@gabdallah 发现了我令人尴尬的错误.

Thanks to @Dominic Tobias and @gabdallah for spotting my embarrassing mistake.

正确答案当然是；

所以尝试检查action.payload.

关于 switch 语句和操作对象的其他评论，我们指的是我在示例中犯的错误，我已经更正了.

The other comments regarding the switch statement and the action object we're referring to errors I made in my example, which I've since corrected.

想象一下，我结合了以下两个减速器；

Imagine I've combined the the following two reducers;

import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import entries from './entries'

export default combineReducers({
  router: routerStateReducer,
  entries
})

在这种情况下，我想根据全局状态的另一部分来改变条目状态；redux-router 提供的路由器状态，例如实现分页.

I would like to mutate the entries state based on another part of the global state, in this case; the router state provided by redux-router in order for example to implement pagination.

我怎么能做这样的事情?

How could I do something like this?

// 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 方法中查询路由器状态

• connect the router state to the Entries route component, use the componentWillMount lifecycle method to check router state and call an action creator with the page and limit values mutating the entries state in turn. This would work; however I'm using some transition middleware to call a static fetchData method on the route component prior to mounting it, so the data get's fetched, then the pagination action creator would be called afterwards; not the desired behaviour.
• listen to router actions somewhere else (i.e a dedicated router redux module), call an action creator on the entries store, but I'm not sure how well this fits with redux-router or how I would get access to the router part of the global store.
• don't do this at all; simply query the router state in the static fetchData method

其他有用的信息；

有问题的实现是 Universal App，深受 react-redux-universal-hot-example 的启发

The implementation in question is Universal App heavily inspired by react-redux-universal-hot-example

相关部门

• 响应 0.14.2
• redux 3.0.3
• 反应路由器 1.0.0-rc3
• redux-router 1.0.0-beta3

我怎样才能实现这种或类似的行为?我什至以正确的方式思考这个问题吗?

How can I achieve this or similar behaviour? Am I even thinking about this the right way?

推荐答案

回到过去，对于开发人员来说事情变得更简单之前，人们会监听历史对象上的 popstate 事件 ;)

Back in the old days before things got simpler for a developer people would listen to the popstate event on the history object ;)

看起来所需的信息是关于操作的?

It looks like the required info is on the action?

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

However your switch statement is using action instead of action.type so there's something fishy going on there.. You shouldn't need to do action = {} either - see http://redux.js.org/docs/basics/Reducers.html

这篇关于还原;通过 combineReducers 使用组合减速器时访问状态的其他部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！