Question

我试图了解redux中的connect函数。

我有这个：

  connect(undefined, (dispatch, { setState }) => ({
    ...
  }))

但是，我也想通过这个：

{ match }: { match: Match }

以类似的方式，例如：

  connect(undefined, (dispatch, { match }: { match: Match }) => ({
    ...
  }))

我如何将两者结合？我正在寻找与此类似的东西（显然这是行不通的）

  connect(undefined, (dispatch, { setState, { match }: { match: Match } }) => ({
    ...
  }))

此连接功能与其他功能一起包装在compose中

Answer 1

mapDispatchToProps是一个返回对象的简单函数。对象的键是方法的名称，值是实际的功能。

您的方法应如下所示：

const mapDispatchToProps = dispatch => {
   return {
     fooMethod: () => {},
     barMethod: () => {},
   };
};

connect(undefined, mapDispatchToProps)(<Your component>);

之后，您可以通过props访问这些方法。

Answer 2

对于它的价值-不要绕过setState-这是一种反模式。

这是用于连接组件的常见语法/构造：

import { connect } from 'react-redux'

const TodoItem = ({ todo, destroyTodo }) => {
  return (
    <div>
      {todo.text}
      <span onClick={destroyTodo}> x </span>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    todo: state.todos[0]
  }
}

const mapDispatchToProps = dispatch => {
  return {
    destroyTodo: () =>
      dispatch({
        type: 'DESTROY_TODO'
      })
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

根据您的问题，让我们在没有所有属性的情况下更轻松地分解语法，并尽可能简单地对其进行查看：

(dispatch) => {
    test : (dispatch, setState /* don't do this */) => { 
        dispatch('do a thing')
    } 
}

在Redux Connect函数中将多个函数传递给mapDispatchToProps

2 个答案: