如何在React Redux中使用mapStateToProps和mapDispatchToProps[重复]

Question

如何在React Redux中使用mapStateToProps()和mapDispatchToProps()？ 我最近开始在学习中使用react-redux。我不知道两者都必须使用的地方。谁能解释一下我吗？以及两者同时使用的情况是什么。

Answer 1

mapStateToProps() :-

此函数将 React 组件的 props 映射到 Redux 存储中保存的状态。这意味着它使用您从商店获取的状态为您的 React 组件创建属性。

何时使用它：如果您希望为 React 组件提供对 Redux 状态的读取访问权限，请使用 mapStateToProps()。例如，如果您想显示 Redux 状态中包含的项目列表，您可以使用 mapStateToProps() 将项目作为 props 发送到组件。

示例：-

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

mapDispatchToProps() :-

此函数的目标是将 React 组件的 props 映射到调度操作。这表明它在 props 中提供了能够将操作发送到 Redux 存储的功能，通常用于状态更新。

何时使用它：如果您希望 React 组件能够修改 Redux 状态，请使用 mapDispatchToProps()。例如，您可以使用 mapDispatchToProps() 提供一个道具，如果您的组件有一个将项目添加到商店的按钮，则单击该道具会执行一个操作。

示例：-

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItemAction(item))
});

要读取并显示 Redux 状态中的事物列表，请使用 mapStateToProps()。

要提供将新项目添加到 Redux 存储的方法，请使用 mapDispatchToProps()。

import { connect } from 'react-redux';

function MyComponent({ items, addItem }) {
  return (
    <div>
      {items.map(item => <div key={item.id}>{item.name}</div>)}
      <button onClick={() => addItem({ id: new Date().getTime(), name: 'New Item' })}>
        Add Item
      </button>
    </div>
  );
}

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

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItemAction(item))
});

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