Redux 函数“connect”在无状态组件中分配了错误的状态值答案

【问题标题】：Redux function "connect" assigns wrong state value in statless componentRedux 函数“connect”在无状态组件中分配了错误的状态值
【发布时间】：2019-05-02 17:21:52
【问题描述】：

我正在尝试将一些道具传递给无状态组件以满足我的条件渲染需求。将redux状态值分配给connect()中的变量时，例如var: state.reducer.var，我没有得到“state.reducer.var”对象。相反，我得到了整个状态对象。

当 console.log(state.reducer.var) 在 connect() 作为回调时，我得到了我的预期结果 - var 值。但是，当 console.log(var) 作为回调将我新分配的 var 传递给它时，我得到了一个对象，当 console.log(state) 时我会得到。

在我的子组件中，我使用我的 var 作为 props.var 得到 undefined

const _ProtectedRoute = ({ component: Component, ...rest }, props) => {
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...rest} />
      }
    </Fragment>
  );
}

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }, (isAuthed) => {console.log('state value: ', isAuthed)})
)(_ProtectedRoute);

我希望我分配 redux 状态的 var 作为道具传递给我的无状态 _ProtectedRoute 组件，以便我可以在条件语句中使用它。

【问题讨论】：

connect 的第二个参数不是回调；它是一个对象（或返回对象的函数），其中包含 prop 名称到 Redux 动作创建器函数的映射。

标签： javascript reactjs redux react-props

【解决方案1】：

你做的一切都是正确的，它应该按预期工作，但我确实注意到你的代码中有一个语法问题，在第一个参数中的花括号后应该有一个右括号来连接，第二个参数也应该返回一个对象，比如下面

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }), (dispatch) => ({
      printAuth:(isAuthed) => {console.log('state value: ', isAuthed)}
  })
)(_ProtectedRoute);

【讨论】：

【解决方案2】：

我对函数参数缺乏了解是问题所在。我的connect() 函数确实可以正常工作（应该可以工作）。在我的子组件中接收道具时出现问题。 ({ component: Component, ...rest }) 已经是“道具”了。 ({ component: Component, ...rest }, props) 表示我分配了另一个未定义的“道具”参数。因此，与其将component 转换为Component 以便稍后在我的函数中用作<Component />，不如稍后在return() 之前完成。它导致像往常一样将 props 作为参数传递。因此，我的子组件现在可以从 mapStateToProps() 接收 redux 状态作为道具。

附：正如一些人提到的，connect() 的控制台登录确实是错误的，因为它不是回调。

const _ProtectedRoute = props => {
  const Component = props.component;
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...props} />
      }
    </Fragment>
  );
}

const mapStateToProps = (state) => ({
  isAuthed: state.user.isAuthed
});

const ProtectedRoute = connect(mapStateToProps, null)(_ProtectedRoute);

【讨论】：