reactjs - 如何使用react-redux连接

Question

这个问题已经有答案了:

How to get simple dispatch from this.props using connect w/ Redux? (3 个回答)

已关闭 6 年前。

我在使用 connect() 时遇到了一些问题。我认为将所有组件包装在 Provider 中会起作用，但事实证明并非如此......所以我发现我需要使用react-redux中的connect()。问题是我不知道应该如何使用它。 This site正在显示一些示例，但是，我没有任何 Action 创建器可以放入连接中，因为我不使用它们......有人可以给我一些建议吗？我只想访问组件内的商店...

Answer 1

为了在容器中使用您的商店，您需要做两件事

首先:使用mapStateToProps()。 顾名思义，它将状态变量从您的商店映射到您指定的 Prop

其次:您需要将这些props连接到您的容器。这就是 connect() 发挥作用的地方。 mapStateToProps 组件返回的对象连接到容器。您可以从 react-redux 导入 connect，例如 import {connect} from 'react-redux';

示例

import React from 'react';
import { connect } from 'react-redux';

class App extends React.Component {
  render() {
    return <div>{this.props.containerData}</div>;
  }
}

function mapStateToProps(state) {
  return { containerData: state.appData };
}

export default connect(mapStateToProps)(App);