redux react-redux 实现简单数据管理

一、为什么使用 react redux

1. 使用 react-redux 可以不使用 store.subscribe 订阅 store 状态
2. 可以将组件分离成容器组件和UI组件，UI组件通过 props 来获取状态、操作状态

二、实现 react-redux

react-redux 需要配合 redux 使用，目的是将 redux 定义的 store 状态注入到组件中

1. 安装

npm i redux -S
npm i react-redux -s

2. 使用 Provider 包裹跟组件

Provider 包裹的组件都可以使用 store

import React from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./App";

import { Provider } from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  
    
      
    
  
);

3. 定义 store，创建 src\store\index.js

import { createStore } from "redux";

const defaultState = {
  num: 1,
};

// 1. 创建 reducer
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case "CHANGE_NUM":
      return Object.assign({}, state, {
        num: state.num + action.payload,
      });
    default:
      return state;
  }
};

// 2. 将 reducer 作为参数传入 createStore 用于创建 store
const store = createStore(reducer);
export default store;

4. 在组件中使用 react-redux

import React, { PureComponent } from "react";
import { connect } from 'react-redux';
class Home extends PureComponent {
  render() {
    return (
      <>
        
 react-redux 
        
 { this.props.num } 
 {/* 4. 在 rendeer 函数中使用状态映射 */}
         this.props.changeNum(100)}>num ++ {/* 5. 在 rendeer 函数中使用方法映射 */}
      
    );
  }
}

// 1. store 状态映射，state参数为store状态，ownProps参数为父组件传递过来的状态
const mapStateToProps = (state, ownProps) => ({
  num: state.num + ownProps.componentParam,
})

// 2. store 方法映射，dispatch 参数为 store.dispatch 方法，ownProps参数为父组件传递过来的状态
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    changeNum: (num) => dispatch({
      type: "CHANGE_NUM",
      payload: num + ownProps.componentParam,
    }),
  }
}

// 3. 通过 connect(mapStateToProps, mapDispatchToProps)(component) 连接组件
export default connect(mapStateToProps, mapDispatchToProps)(Home)