Using values from previously dispatched action in the next action in React and Redux

I’m using react-redux and also redux-thunk I have two actions whereby one action is dependent on the other action’s result to perform its own action. Below is how my code looks;

const file = useSelector(state => state.Files.file)
const handleActions = async () =>{
  try{
      await dispatch(uploadFile(dataForm))
      await dispatch(updateBusiness(params))
  }
  catch(e){
      console.log(e)
  }

}

So, I need a value in the response data of uploadFile() to perform updateBusiness()

I tried using file right after uploadFile() but I am getting undefined.

 const file = useSelector(state => state.Files.file)
 const handleActions = async () =>{
   try{
       await dispatch(uploadFile(dataForm))
       params.file = file
       await dispatch(updateBusiness(params))
   }
   catch(e){
       console.log(e)
   }

 }

How can I solve this?

Answer

You can useEffect to check when file update

useEfect(() => {
  if(file){
    params.file = file
    dispatch(updateBusiness(params))
  }
}, [file])

Advertisement

Answer