Создание thunk

Question 1

Создание thunk

Answer 1

Возов санки в компоненте:
useEffect(() => {
dispatch(fetchTodolistsTC())
}, [])

Санка в бизнесс-логике:
export const fetchTodolistsTC = createAsyncThunk(
${todolistsSlice.name}/fetchTodolistsTC,
async (_, thunkAPI) => {
try {
const res = await todolistsApi.getTodolists()
thunkAPI.dispatch(setTodolistsAC({ todolists: res.data }))
} catch (error) {
console.log(error)
}
}
)

Автоматическое создание экшена (https://redux-toolkit.js.org/api/createAsyncThunk#return-value):
export const todolistsSlice = createSlice({
/…/
extraReducers: builder => {
builder.addCase(fetchTodolistsTC.fulfilled, (state, action) => {
return action.payload.todolists.map(tl => {
return { …tl, filter: ‘all’ }
})
})
},
reducers: create => ({
// ❌ удалите setTodolistsAC
/setTodolistsAC: create.reducer<{ todolists: Todolist[] }>((state, action) => {
action.payload.todolists.forEach(tl => {
state.push({ …tl, filter: ‘all’ })
})
}),/
/…/
}),
})

export const fetchTodolistsTC = createAsyncThunk(
${todolistsSlice.name}/fetchTodolistsTC,
async (_, thunkAPI) => {
try {
const res = await todolistsApi.getTodolists()
return { todolists: res.data }
} catch (error) {
return thunkAPI.rejectWithValue(error)
}
}
)