Utilizando "createAsyncThunk" do Redux para fazer chamada async
Rafael Teles Vital
Posted on April 17, 2024
JÁ PRECISOU INICIALIZAR O ESTADO DO REDUX COM RESULTADO DE UMA API ASYNC?
Pois bem aqui está um exemplo de como funcionar essa chamada async da API, para inicializar o estado no redux.
Primeiramente criamos uma função async, nesse caso chamada de "loadCourse" e depois podemos colocar dentro do "createSlice" na propriedade extraReducers, quando a função criada estiver com o state como "fulfilled" recebemos o retorno no campo action.payload, como segue abaixo.
export const loadCourse = createAsyncThunk(
'player/load',
async () => {
const response = await api.get('/courses/1')
return response.data
}
)
export const playerSlice = createSlice({
name: 'player',
initialState,
reducers: {
// como se fosse useEffect para carregar
extraReducers(builder) {
builder.addCase(loadCourse.fulfilled, (state, action) =>{
state.course = action.payload
})
}
})
💖 💪 🙅 🚩
Rafael Teles Vital
Posted on April 17, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.