connect()前两个参数是什么？

connect() 是 react-redux 中用于把 React 组件和 Redux store 连接起来的高阶函数，它一共可以接收 4 个参数，但最常用的是前两个

connect(mapStateToProps, mapDispatchToProps)

下面解释这两个参数分别干什么：

1. mapStateToProps(state, ownProps)

作用：把 redux 的 state 映射为组件的 props

写法：

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

组件中就可以通过 props 拿到：

this.props.counter

特点：

state 变化时会自动触发组件重新渲染

参数说明：

• state：整个 redux store 的 state

• ownProps：组件自身的 props（可选）

2. mapDispatchToProps(dispatch, ownProps)

作用：把 store.dispatch 映射为组件的 props 方法

两种写法。

写法 A：函数写法（你可以自定义派发逻辑）

const mapDispatchToProps = (dispatch) => ({
  add() {
    dispatch({ type: 'ADD' })
  },
  fetchUser(id) {
    dispatch(getUserAsync(id))
  }
});

使用：

this.props.add()

写法 B：对象写法（最精简）

const mapDispatchToProps = {
  add,
  minus,
  fetchUser
};

会自动绑定 dispatch。

connect 最常用写法

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

总结

参数	作用	触发时机
mapStateToProps	state → props	state 变化时自动触发
mapDispatchToProps	dispatch → props 方法	不会自动触发，只给组件提供方法