一、React项目中状态管理方式

  1. Redux

需要用户手动订阅状态变化

  1. Redux+React-Redux结合

不需要手动订阅

  1. redux + @rematch/core

语法更加接近vuex

二、ActionCreator模块

  1. action

描述用户行为的对象

  1. ActionCreator

用以创建用户行为描述的方法函数

  1. export const increment = (payload)=>{
  2.   return {
  3.     type:IN_CREMENT,
  4.     payload
  5.   }
  6. }

三、redux与react-redux结合实现状态管理

react-redux文档

  1. 安装react-redux
  1. cnpm i react-redux -S
  1. 在根组件App外，全局注入store
  1. import store from './store'
  2. import {Provider} from 'react-redux'
  4. ReactDOM.render(
  5.   <Provider store={store}>
  6.    <App />
  7.   </Provider>,
  8.   document.getElementById('root')
  9. );
  1. 在需要获取store数据的组件中，使用connect进行提取

connect作用是，将store中的数据转移到当前组件的props中

  1. import {connect} from 'react-redux' // 1.专门取数据的角色
  2. class Num extends Component { //2. 需要使用数据的角色
  3.   render() {
  4.     console.log('Num组件',this.props);
  5.   }
  6. }
  7. const mapStateToProps=(state)=>{ //3. 给connect使用的特定方法函数
  8.   //自定义的方法函数，用以将状态机中的state设置到当前组件的props中
  9.   return {
  10.     num:state //num是自定义的props属性名，state就是状态机中的数据包
  11.   }
  12. }
  13. export default connect(mapStateToProps)(Num)  //4. 调用connect，让他把数据转移到props中
  1. 在需要修改store数据的组件中，通过connect将对应的actionCreator转换为dispatch并使用

前提是，需要事先提取actionCreator模块

  1. import {increment,decrement} from '../action' //引入actionCreator方法函数
  2. import {connect} from 'react-redux'
  3. class Btn extends Component {
  4.   render() {
  5.     console.log('Btn组件',this.props);
  6.     let {children,increment,decrement} = this.props 
  7.     //这里的 increment,decrement 已经变成了对应的dispatch
  8.   }
  9. }
  11. export default connect(null,{increment,decrement})(Btn)

使用redux+react-redux完成购物车数据共享

六、任务