Utilizando "createAsyncThunk" do Redux para fazer chamada async

devteles

Rafael Teles Vital

Posted on April 17, 2024

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
💖 💪 🙅 🚩
devteles
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.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024