React 18 仿携程项目【二十四】【redux-toolkit】createSlice、reducer、与immer

1、安装Redux Toolkit（RTK）

npm install @reduxjs/toolkit  react-redux

2、因为redux-toolkit是全面支持typescript的，所以不需要安装类型文件。

slice.ts

（1）引入createSlice 方法

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

（2）createSlice函数创建并导出本地变量 productDetailSlice

export const ProductDetailSlice = createSlice({
    name: ,
    initialState: ,
    reducers: {
        fetchStart: (state)=>{
            state.loading = true
        }
    }

})

createSlice中的reducer有3个特点：

• 第一，这里的reducer实际上是把action和reducer捆绑在一起了，所以不需要再单独定义action了

• 第二，这里的reducer是对象而不是过程，每个对象对应一个action，同时也对应action的处理函数

• 第三，因为是createSlice是面对对象而不是面对过程，所以我们不必再写switch了，这一点实在是太方便了。

 store.ts

（1）引入slice

import { ProductDetailSlice } from "./productDetail/slice";

（2）引入combineReducers方法

import { combineReducers } from "@reduxjs/toolkit";

（3） rootReducer中写入新的slice中的reducer

//组合多个reducer
const rootReducer = combineReducers({
    language: languageReducer,
    productRecommend: productRecommendReducer,
    productDetail: ProductDetailSlice.reducer
})

rootReducer完成，这时把鼠标放在type RootState上面。会看到现在productDetail的类型也进来了

DetailPage.ts（函数组件）

（1）引入ProductDetailSlice和hooks

import { ProductDetailSlice } from "../../redux/productDetail/slice";
import { useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";

（2）初始化数据

const loading = useSelector((state)=> state.productDetail.loading);
const error = useSelector((state)=> state.productDetail.error);
const product = useSelector((state)=> state.productDetail.product);

（3）useDispatch hook取得dispatch函数，用来分发actions

const dispatch  = useDispatch();

（4）初次渲染UI时使用axios异步获取api

useEffect (()=>{ //初次渲染UI时使用axios异步获取api
        const fetchData = async()=>{
            dispatch(ProductDetailSlice.actions.fetchStart())
            try {
                const res = await axios.get(`http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}`)
                dispatch(ProductDetailSlice.actions.fetchSuccess(res.data))
            } catch (error) {
                dispatch(ProductDetailSlice.actions.fetchFail(error instanceof Error ? error.message : "error"))
            }

        };
        fetchData()
    },[])