React @reduxjs/toolkit 使用详解

1. 安装

npm install @reduxjs/toolkit react-redux

2. 配置store

// src/store/index.js
import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./features/counterSlice";
// configureStore创建一个redux数据
export default configureStore({
  reducer: {
    counter: counterSlice,
  },
});

3. 配置slice

// src/store/features/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter", // 命名空间，在调用action的时候会默认的设置为action的前缀
  // 初始值
  initialState: {
    count: 1,
  },
  // 这里的属性会自动的导出为actions，在组件中可以直接通过dispatch进行触发
  reducers: {
    increment(state, { payload }) {
      state.count = state.count + payload.step; // 内置了immutable
    },
    decrement(state) {
      state.count -= 1;
    },
  },
});

// 导出actions
export const { increment, decrement } = counterSlice.actions;

// 内置了thunk插件，可以直接处理异步请求
export const asyncIncrement = (payload) => (dispatch) => {
  setTimeout(() => {
    dispatch(increment(payload));
  }, 2000);
};

export default counterSlice.reducer; // 导出reducer，在创建store时使用到

4. 使用

//index.js
import React from "react";
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(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);


//test.jsx
//在组件内部，使用useSelector和useDispatch可以直接获取state数据与dispatch方法
import { useSelector, useDispatch } from "react-redux";
import { increment, asyncIncrement } from "../../store/features/counterSlice"; // 引入actions

function Tset() {
  const { count } = useSelector((state) => state.user);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <hr></hr>
      <button
        onClick={() => {
          dispatch(increment({ step: 2 })); // dispatch派发action
        }}
      >
        {count}
      </button>
      <hr />
      <button
        onClick={() => {
          dispatch(asyncIncrement({ step: 1 }));
        }}
      >
        {count}
      </button>
    </div>
  );
}

export default Tset;

5. 异步 createAsyncThunk

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
// createAsyncThunk创建一个异步的action，这个方法被触发的时候会有三个状态
// pending(进行中) fulfilled(成功) rejected(失败)

// 发起网络请求获取数据
const loadMoviesAPI = () =>
  fetch(
    "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48"
  ).then((res) => res.json());

// 这个action是可以直接调用的，用来处理异步操作获取数据
export const loadData = createAsyncThunk("movie/loadData", async () => {
  const res = await loadMoviesAPI();
  return res; // 此处的返回结果会在 .fulfilled中作为payload的值
});

export const movieSLice = createSlice({
  name: "movie",
  initialState: {
    list: [],
    totals: 0,
  },
  reducers: {
    loadDataEnd(state, { payload }) {
      state.list = payload;
      state.totals = payload.length;
    },
  },

  extraReducers: (builder) => {
    builder
      .addCase(loadData.pending, (state) => {
        console.log("pending", state);
      })
      .addCase(loadData.rejected, (state, err) => {
        console.log("rejected 失败", err);
      })
      .addCase(loadData.fulfilled, (state, action) => {
        console.log("fulfilled 成功", state);
        console.log("fulfilled action", action);
        state.list = action.payload;
      });
  },
});

export const { loadDataEnd } = movieSLice.actions;
export default movieSLice.reducer;