还原; 通过 combineReducers 使用组合减速器时访问状态的其他部分

IT技术 javascript reactjs react-router redux
2021-05-20 21:39:50

更新

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

正确答案当然是；

所以尝试检查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 module），在条目存储上调用动作创建者，但我不确定这与 redux-router 的匹配程度，或者我如何访问路由器的路由器部分全球商店。
  • 根本不要这样做；只需在静态 fetchData 方法中查询路由器状态

其他有用的信息；

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

相关部门

  • react 0.14.2
  • 还原 3.0.3
  • react-router 1.0.0-rc3
  • redux-路由器 1.0.0-beta3

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

1个回答

回到过去，在开发人员的事情变得更简单之前，人们会收听历史对象上的 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

其它你可能感兴趣的问题
上一篇要么将根组件包装在 <Provider> 中，要么将“store”作为props显式传递给“Connect(CharacterList) 下一篇静态元素交互