redux createAsyncThunk
时间: 2024-09-30 10:11:56 浏览: 30
Redux Toolkit 提供了一个便捷的方式来创建异步操作(`createAsyncThunk`),它结合了 Redux Thunk 动作与 async/await 语法,使得在 Redux 中处理异步操作变得更加直观。`createAsyncThunk` 是为了简化基于 Promise 的 Redux Actions 的创建过程。
当你想执行一个需要等待服务器响应的操作时,可以使用 `createAsyncThunk`。这里是一个简单的示例[^1]:
```javascript
import { createAsyncThunk } from '@reduxjs/toolkit';
// 命名为 fetchTodos 的异步 thunk action
const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
const response = await fetch('https://api.example.com/todos');
if (!response.ok) {
throw new Error(`Failed to fetch todos. Response code: ${response.status}`);
}
return await response.json();
});
export default fetchTodos;
```
这个动作创建了一个返回 Promise 的函数,当调用 `dispatch(fetchTodos())` 时,它会发送一个请求并返回服务器的响应。在 reducer 中,你可以处理这些异步操作的状态变化:
```javascript
import { createSlice } from '@reduxjs/toolkit';
import fetchTodos from './fetchTodos';
const todosSlice = createSlice({
name: 'todos',
initialState: { loading: false, data: [], error: null },
reducers: {},
extraReducers: builder => {
builder.addCase(fetchTodos.pending, (state) => {
state.loading = true;
});
builder.addCase(fetchTodos.fulfilled, (state, action) => {
state.data = action.payload;
state.loading = false;
});
builder.addCase(fetchTodos.rejected, (state, action) => {
state.error = action.error.message;
state.loading = false;
});
},
});
export default todosSlice.reducer;
```
通过这种方式,`createAsyncThunk`使异步操作更易于管理,同时保持了Redux的单一状态来源原则。
阅读全文