如何访问 react-redux-connect 的 @connect 装饰器内的动态数据？

Question

因此，我将 react-async-connect 与 react-redux-connect 结合使用，因此：

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState(), params.userID)) {
      console.log('it was not already loaded')
      return dispatch(loadProfile(params.userID))
    }

    console.log('it was indeed already loaded')

  },
}])
@connect(
  state => ({
    profile: {???},
    error: state.publicData.profile.error,
    loading: state.publicData.profile.loading,
  }),
  { initializeWithKey }
)
export default class Profile extends Component {
  ...etc

基本上，asyncConnect 触发加载相关数据的操作，然后我使用 @connect 装饰器加载此数据作为下面 Profile 组件的道具。麻烦的是，我想根据 userId 将用户配置文件数据加载到我的商店中，所以数据的位置是 "dynamic"。如何访问 @connect 装饰器中的 params 或其他 globalState 类型的东西？

假设用户的 id 是 1234，我需要的是这样的：

@connect(
  state => ({
    profile: state.publicData.users.1234,
    error: state.publicData.profile.error,
    loading: state.publicData.profile.loading,
  }),
  { initializeWithKey }
)

当然，该 userId 在 params 对象中，也在路由本身中。我怎样才能访问它？

编辑：

所以我应该更仔细地查看文档。事实证明，您可以传递第二个 ownProps 参数，如下所示：

@connect(
  (state, ownProps) => ({
    profile: state.publicData.users[ownProps.params.userId],
    error: state.publicData.profile.error,
    loading: state.publicData.profile.loading,
  }),
  { initializeWithKey }
)

Answer 1

router 没有被处理成状态 - 你应该可以在你的 reducer.js 文件中这样做：

reducer.js

...
import { routerStateReducer } from 'redux-router';

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

这应该将您所有的路由器信息放入状态，并使其可供您的连接功能访问：

component.js

@connect(
  state => ({
    profile: state.publicData.users[state.router.params.userId],
    error: state.publicData.profile.error,
    loading: state.publicData.profile.loading,
  }),
  { initializeWithKey }
)

此代码假定您拥有 userId 并且始终如此，否则将无法正常工作。

此外 - 根据您的更新 - ownProps 也应该可以访问参数 -

@connect(
  (state, ownProps) => ({
    profile: state.publicData.users[ownProps.params.userId],
    error: state.publicData.profile.error,
    loading: state.publicData.profile.loading,
  }),
  { initializeWithKey }
)

如何访问 react-redux-connect 的 @connect 装饰器内的动态数据？

How to access dynamic data inside @connect decorator of react-redux-connect?

asynchronous

reactjs

react-router

redux

react-redux

reducer.js

component.js