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

debugcn 发表于 Dev

因此，我将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将用户配置文件数据加载到我的商店中，因此数据的位置是“动态的”。我如何访问params@connect装饰器中的内容或其他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 }
)

凯莉·安德鲁斯（Kelly J Andrews）

在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 }
)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。