揭开React-Redux七日打卡的奥秘，轻轻松松玩转数据管理

2024-01-11 14:24:25

在实际项目中，我们经常会遇到这样的问题：一个组件既有UI又有业务逻辑，该怎么处理？这时，我们需要将它拆分成两个组件：容器组件和UI组件。容器组件负责管理数据和逻辑，而UI组件只负责UI的呈现。

这样做的好处是，我们可以将UI和逻辑分开，使代码更加清晰易维护。同时，它也有助于我们实现单向数据流，即数据只能从容器组件流向UI组件，反之则不行。

容器组件

容器组件是负责管理数据和逻辑的组件。它通常会使用Redux来管理状态。Redux是一个状态管理库，它可以帮助我们轻松地管理复杂的状态。

为了创建一个容器组件，我们可以使用connect()方法。connect()方法将一个组件与Redux store连接起来，使组件可以访问Redux store中的状态。

import { connect } from 'react-redux';

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

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT_COUNT' })
  };
};

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

在这个例子中，CounterContainer是一个容器组件，它使用connect()方法与Redux store连接起来。mapStateToProps()函数将Redux store中的状态映射到组件的props中，而mapDispatchToProps()函数将Redux store中的dispatch方法映射到组件的props中。

UI组件

UI组件只负责UI的呈现。它不关心数据和逻辑。

const Counter = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.incrementCount}>Increment</button>
    </div>
  );
};