DEV Community

Rafael Teles Vital
Rafael Teles Vital

Posted on

Utilizando "createAsyncThunk" do Redux para fazer chamada async

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
    })
  }
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)