Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

527
Visualizações
Redux: Dispatch actions in sequence

I'm creating a Reddit client on Redux and I have 2 store dispatches firing in the app:

// App()
const dispatch = useDispatch();

useEffect(() => {
    const stateMatch = window.location.href.match(/state=([^&]*)/);
    const codeMatch = window.location.href.match(/code=([^&]*)/);

    if ((stateMatch && codeMatch) || localStorage.getItem("access_token")) {
        dispatch(fetchUser());
        dispatch(fetchSubs());
    }
});

...

However, I want fetchUser() to run and finish before fetchSubs() can begin, as the former currently seems to ruin API calls for the latter while it's running. How can I solve this?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Since you are using createAsyncThunk you can do something like this:

  dispatch(fetchUser())
  .unwrap()
  .then((user) => {
    // do anything you want with user, or don't, also dispatch actions
    dispatch(fetchSubs());
  })
  .catch((e) => {
    // error in case of rejection inside createAsyncThunk second argument
    console.log(e);
  });

Explanation

Let's say const thunk = fetchUser() so basically dispatch(fetchUser()) is the same as dispatch(thunk).

Redux's dispatch function returns whatever its argument (the action) returns.

So in this case, dispatch(thunk) returns whatever thunk returns.

thunk, based on how createAsyncThunk works, returns a promise that either resolves to fulfilled action, or the rejected action. (those actions that you receive in extra reducers).

This is how you can access those actions:

dispatch(thunk).then(fullfilledAction=>...).catch(rejectedAction=>...`

RTK library also provides a method called unwrap. Instead of those action objects I explained above, it lets you use the returned value from the 2nd argument of createAsyncThunk.

export const fetchUser = createAsyncThunk("user/fetchUser", async () => {
const user = await Reddit.getUser().then(val => {
    return val;
});

return user; // unwrap lets you use this instead of action objects.
})
about 4 years ago · Juan Pablo Isaza Relatório

0

Try this with pure react and redux hooks

...

const state = useStore(yourStore) //use your method to read state 
const dispatch = useDispatch();
const checkValue = () => {
   const stateMatch = window.location.href.match(/state=([^&]*)/);
    const codeMatch = window.location.href.match(/code=([^&]*)/);

    if ((stateMatch && codeMatch) || localStorage.getItem("access_token")) {
        return true;
    }
    return false;
}

useEffect(() => {
    if(checkValue())
        dispatch(fetchUser());
    }
}, []);

useEffect(() => {
    if(checkValue() && state.authState)
        dispatch(fetchSubs());
    }
}, [state.authState]);


...
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda