Redux工具包更新状态为thunk

Question

我有一个这样的初始状态。

const initialState = {
loading: false,
products: []
}

对于get产品，我使用thunk并从API获取数据加载字段描述API调用的状态。如果加载为真，则显示组件的进度。

export const getProducts = createAsyncThunk('product/getProducts ',
async (payload, { rejectWithValue }) => {
try {
//fetch from somewhere
}
catch (e) {
return rejectWithValue(e.message)
}
}
)
const productSlice = createSlice({
name: "product",
initialState,
reducers: {
setLoading: (state, action) => {
state.loading = action.payload;
}
},
})

在组件中，首先调度进行加载，然后获取产品。

// In some component
dispatch(setLoading(true))
dispatch(getProducts())

我的问题是，我只能调用getProducts并更新该函数内的加载状态吗？

//In some component
dispatch(getProducts())

Answer 1

可以。这是一个非常简单的

如下更新您的createSlice部分

const productSlice = createSlice({
name: "product",
initialState,
reducers: {},
extraReducers: (builder) => {
builder.addCase(getProducts.pending, (state) => {
state.loading = true;
});
builder.addCase(getProducts.fulfilled, (state) => {
state.loading = false;
});
},
}) 

Answer 2

您使用了createAsyncThunk，它已经内置来处理createSlice中extraReducers的挂起/完成/拒绝状态。如果获取失败，您也可以处理拒绝状态。

const productSlice = createSlice({
name: 'product',
initialState,
extraReducers: (builder) => {
builder.addCase(getProducts.pending, (state, action) => {
state.isLoading = true;
})
builder.addCase(getProducts.fulfilled, (state, action) => {
state.isLoading = true;
state.products = action.payload
})
builder.addCase(getProducts.rejected, (state, action) => {
state.isLoading = false;
})
},
})

要使用它，只需简单地调用dispatch(getProducts(((和使用thunk的extraReducers就足够了