Utilizando “createAsyncThunk” do Redux para fazer chamada async

RMAG news

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
})
}
})

Leave a Reply

Your email address will not be published. Required fields are marked *