React: react UI组件的业务逻辑

import connect from 'react-redux';

Posted by chanweiyan on July 19, 2020

当使用 React + Redux 时,组件如何使用 state 和修改 state

UI组件 vs 容器组件

1
2
3
4
5
import connect from 'react-redux';
const List = connect(
  mapStateToProps,
  mapDispatchToProps
)(Count);

React UI组件的业务逻辑

  • mapStateToProps

负责输入逻辑,将state映射到UI组件的参数(props)。

  • mapDispatchToProps

负责输出逻辑,将用户对UI组件的操作映射成action。

  • Redux 应用中的数据遵循如下声明周期

Redux 应用中的数据