将 redux 状态传递给调度程序

Question

我目前正在编写一个 React 项目（使用 redux 和 recompose）并尝试将我的 redux 状态传递给我的连接内的调度。

我想避免编写我的连接代码两次，但必须这样做才能使currentLocaleCode 出现在状态中，以便调度可以从我的本地状态中获取它。

看起来是这样的：

export default compose(
  connect(
    (
      {
        locales: { currentLocaleCode }
      }
    ) => ({ currentLocaleCode })
  ),
  connect(null, (dispatch) => ({
    fetchPage: () =>
      dispatch(pagesActions.fetchPage(currentLocaleCode))
  })),
...

我想立即使用 currentLocaleCode 并实现以下目标：

export default compose(
  connect(
    ({ locales: { currentLocaleCode } }) => ({ currentLocaleCode }),
      (dispatch, { currentLocaleCode }) => ({
        fetchPage: () =>
          dispatch(pagesActions.fetchPage(currentLocaleCode))
      }),
...

这可能吗？

Answer 1

您可以简单地将数据作为道具传递给组件并使用所需数据调用动作创建者，而不是使用两个连接 HOC

喜欢

export default compose(
  connect(({locales: { currentLocaleCode }}) => ({ currentLocaleCode }),
  (dispatch) => ({
    fetchArticles: (dispatch) => ({
      fetchPage: =>
        (currentLocaleCode) => dispatch(pagesActions.fetchPage(currentLocaleCode))
    })
  })),
...

在连接的组件中，您可以调用 fetchPage

this.props.fetchPage(this.props.currentLocaleCode);