4_引入react-redux

1. 安装

• 安装依赖 npm i react-redux -S

2. 配置 redux

1. 创建 constants/ActionType.js 文件

const ADD_COUNT = "add_count";

export {
    
     ADD_COUNT };

2. 创建 store/reducers/user.js 文件

import {
    
     ADD_COUNT } from "../../constants/ActionType";

export default (state = {
    
     count: "" }, action) => {
    
    
  switch (action.type) {
    
    
    case ADD_COUNT :
      return {
    
    
        count: action.count,
      };
    default:
      return state;
  }
};

3. 创建 store/actions/user.js 文件

import {
    
     ADD_COUNT } from "../../constants/ActionType";

const addCount = (count) => {
    
    
  return {
    
    
    type: ADD_COUNT,
    count,
  };
};

export {
    
     addCount };

4. 创建 store/index.js 文件

import {
    
     configureStore } from "@reduxjs/toolkit";
import countReducer from "./reducers/user";

export default configureStore({
    
    
  reducer: countReducer 
});

5. 在入口文件 index.js 中配置

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

<Provider store={
    
    store}>
  <BrowserRouter>
    <Routes />
  </BrowserRouter>
</Provider>

3. 使用 redux

1. 在类组件中使用 connect

import {
    
     connect } from "react-redux";
import {
    
     setCount} from "../../store/actions/count";

// 配置组件和redux中数据映射关系
// 通过props.count，props.setCount()调用
function mapStateToProps(state) {
    
    
  return {
    
    
    count: state.count,
  };
}
function mapDispatchToProps(dispatch) {
    
    
  return {
    
    
    setCnt(count) {
    
    
      dispatch(setCount(count));
    },
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(组件名);
// connect 现在是接受参数mapStateToProps/mapDispatchToProps，返回⼀个函数，这个返回的函数是高阶组件。
// 它会接受⼀个组件作为参数，然后⽤connect把组件包装以后再返回。

2. 在函数组件中使用

import React, {
    
     useEffect } from "react";
import {
    
     useSelector, useDispatch } from "react-redux";
import {
    
     ADD_COUNT } from "../../constants/ActionType";
// 通过useSelector(callback)获取store数据
const Login = () => {
    
    
  // 获取中央仓库中的username
  const count = useSelector((state) => state.count);
  // 修改中央仓库数据
  const dispatch = useDispatch();
  dispatch({
    
     type: ADD_COUNT, count: 1 });
};