createAsyncThunk（二）

提示：

createAsyncThunk自动生成 pending/fulfilled/rejected action 类型

xxxxxxxxxx
//slices/productSlice.js

//创建获取商品数据的thunk
export const productListGet = createAsyncThunk('product/productListGet', async () => {
    const data = await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve([{ name: '苹果' }, { name: '香蕉' }, { name: "蓝莓" }])
        }, 3000)
    })


    return data
})


 extraReducers(builder) {
        builder
            .addCase(addProductPost.pending, (state, action) => {
                state.isLoading = true
            })
            .addCase(addProductPost.fulfilled, (state, action) => {
                state.isLoading = false
                state.list.push(action.payload)
            })
            .addCase(productListGet.pending, (state, action) => {
                state.isLoading = true
            })
            .addCase(productListGet.fulfilled, (state, action) => {

                return { list: action.payload, isLoading: false }
            })
            .addCase(productListGet.rejected, (state, action) => {
                state.isLoading=false
            })

    }

xxxxxxxxxx
//pages/Product.js
import { addProductPost, productListGet } from '../slices/productSlice'
//组件挂载后请求商品数据
 useEffect(() => {
        dispatch(productListGet())
    }, [])

提示：

Immer 让我们以两种方式更新状态：要么 更新 现有状态值，要么 return 一个新结果。

如果我们返回一个新值，它将用我们返回的任何内容完全替换现有状态。