reactjs - mapStateToProps と mapDispatchToProps

Question

react-reduxの関数への引数mapStateToPropsとmapDispatchToProps引数の違いは何ですか?connect

Answer 1

非常に簡単に言えば、

mapStateToProps : redux 状態を反応コンポーネントの props に接続します。

mapDispatchToProps : redux アクションを反応小道具に接続します。

非常に簡単な例: (私の言いたいことがわかると思います)

// state
const mapStateToProps = state => {
  return { lists: state.lists };
};

// props
const mapDispatchToProps = ({ lists }) => (
  <ul>
    { 
      lists.map(el => (
        <li key={ el.id }>
          { el.heading }
        </li>
      )
    }
  </ul>
);

// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);

Answer 2

非常に簡単に言えば：

mapStateToPropsコンポーネントからグローバル状態の値を取得するときに呼び出されます

function mapStateToProps(state) {
  return {
    message: state.message

  };
}

グローバル状態の値は、アクションの助けを借りてのみ変更されます。したがって、グローバル状態の値を変更したい場合は、アクションが必要です。 mapDispatchToPropsコンポーネントでアクションをバインドするために使用されます。