React中使用Redux - 通过react-redux库连接React和Redux

import React from 'react';
import { connect } from 'react-redux';
 
// 假设这是一个React组件
class MyComponent extends React.Component {
  render() {
    // 通过this.props访问Redux store的状态和动作创建者
    const { counter, incrementCounter, decrementCounter } = this.props;
    return (
      <div>
        <p>Counter: {counter}</p>
        <button onClick={incrementCounter}>增加</button>
        <button onClick={decrementCounter}>减少</button>
      </div>
    );
  }
}
 
// 连接Redux和React
// 这里的mapStateToProps和mapDispatchToProps函数定义了如何将Redux store的状态和动作创建者转换为组件的props
const mapStateToProps = (state) => ({
  counter: state.counter
});
 
const mapDispatchToProps = (dispatch) => ({
  incrementCounter: () => dispatch({ type: 'INCREMENT' }),
  decrementCounter: () => dispatch({ type: 'DECREMENT' })
});
 
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在这个例子中，我们创建了一个React组件MyComponent，并使用connect函数从react-redux库将它连接到Redux store。mapStateToProps定义了一个函数，该函数接收Redux store的状态并返回一个对象，这个对象中的属性会作为props传递给组件。mapDispatchToProps定义了一个函数，该函数返回将被作为props传递的动作创建者。这样，我们就可以在组件内部通过this.props访问store的状态以及触发动作了。