react【五】redux/reduxToolkit/手写connext-ReduxToolkit

5.1 基本使用

npm install @reduxjs/toolkit react-redux

• 需要在根组件传递store的值
  
  
  

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { changeNumber } from "../store/features/counter";

export class About extends PureComponent {
  changeNum(num) {
    this.props.changeNumber(num);
  }
  render() {
    const { counter } = this.props;
    return (
      <div>
        {counter}
        <button onClick={(e) => this.changeNum(5)}>+5</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter.counter,
});

const mapDispatchToProps = (dispatch) => ({
  changeNumber(num) {
    dispatch(changeNumber(num));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(About);

5.2 异步操作 写法1

import { createAsyncThunk } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

// toolkit已经集成了thunk所以可以直接使用
// 第一个参数是name可以根据自己的喜好取
// 可以把这个函数看成是promise 它跟promise十分相似
export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata",

  // dispatch传递的参数是第一个 extraInfo
  async (extraInfo, { dispatch, getState }) => {
    console.log(extraInfo);
    const res = await axios.get("http://123.207.32.32:8000/home/multidata");

    // 不能直接返回res 没办法直接对其进行序列化
    return res.data;
  }
);

const homeSlice = createSlice({
  name: "home",
  initialState: {
    banner: [],
  },
  reducers: {
    changeBanner(state, { payload }) {
      state.banner = payload;
    },
  },

  // 这里是对异步操作进行操作的方法
  extraReducers: {
    [fetchHomeMultidataAction.pending](state, action) {
      console.log(action);
    },
    [fetchHomeMultidataAction.fulfilled](state, { payload, meta }) {
      // 异步操作返回的参数
      state.banner = payload.data.banner.list;
      // 在dispatch时传递的参数
      console.log(meta.arg);
    },
    [fetchHomeMultidataAction.rejected](state, action) {
      console.log("fetchHomeMultidataAction rejected");
    },
  },
});

export const { changeBanner } = homeSlice.actions;
export default homeSlice.reducer;

5.3 异步操作 写法2

import { createAsyncThunk } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

// toolkit已经集成了thunk所以可以直接使用
// 第一个参数是name可以根据自己的喜好取
// 可以把这个函数看成是promise 它跟promise十分相似
export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata",

  // dispatch传递的参数是第一个 extraInfo
  async (extraInfo, { dispatch, getState }) => {
    console.log(extraInfo);
    const res = await axios.get("http://123.207.32.32:8000/home/multidata");

    // 不能直接返回res 没办法直接对其进行序列化
    return res.data;
  }
);

const homeSlice = createSlice({
  name: "home",
  initialState: {
    banner: [],
  },
  reducers: {
    changeBanner(state, { payload }) {
      state.banner = payload;
    },
  },

  // 这里是对异步操作进行操作的方法
  // extraReducers: {
  //   [fetchHomeMultidataAction.pending](state, action) {
  //     console.log(action);
  //   },
  //   [fetchHomeMultidataAction.fulfilled](state, { payload, meta }) {
  //     // 异步操作返回的参数
  //     state.banner = payload.data.banner.list;
  //     // 在dispatch时传递的参数
  //     console.log(meta.arg);
  //   },
  //   [fetchHomeMultidataAction.rejected](state, action) {
  //     console.log("fetchHomeMultidataAction rejected");
  //   },
  // },
  extraReducers: (builder) => {
    builder
      .addCase(fetchHomeMultidataAction.pending, (state, action) => {
        console.log("fetchHomeMultidataAction pending");
      })
      .addCase(fetchHomeMultidataAction.fulfilled, (state, { payload }) => {
        state.banners = payload.data.banner.list;
        state.recommends = payload.data.recommend.list;
      });
  },
});

export const { changeBanner } = homeSlice.actions;
export default homeSlice.reducer;