Can I dispatch an action in reducer

Question

is it possible to dispatch an action in a reducer itself  I have a progressbar and an audio element  The goal is to update the progressbar when the time gets updated in the audio element  But I don t know where to place the ontimeupdate eventhandler  or how to dispatch an action in the callback of ontimeupdate  to update the progressbar  Here is my code     reducer  const initialState         audioElement  new AudioElement  test mp3        progress  0 0    initialState audioElement audio ontimeupdate        gt        console log  progress   initialState audioElement currentTime initialState audioElement duration         how to dispatch  SET PROGRESS VALUE  now       const audio    state initialState  action    gt        switch action type           case  SET PROGRESS VALUE               return Object assign     state   progress  action progress            default  return state            export default audio

User · Answer

redux-loop takes a cue from Elm and provides this pattern

User · Answer

Dispatching and action inside of reducer seems occurs bug  I made a simple counter example using useReducer which  quot INCREASE quot  is dispatched then  quot SUB quot  also does  In the example I expected  quot INCREASE quot  is dispatched then also  quot SUB quot  does and  set cnt to -1 and then continue  quot INCREASE quot  action to set cnt to 0  but it was -1   quot INCREASE quot  was ignored  See this  https   codesandbox io s simple-react-context-example-forked-p7po7 file  src index js 144-154 let listener        gt      console log  quot test quot       const middleware    action    gt      console log action     if  action type      quot INCREASE quot         listener            const counterReducer    state  action    gt      middleware action     switch  action type        case  quot INCREASE quot         return              state          cnt  state cnt   action payload              case  quot SUB quot         return              state          cnt  state cnt - action payload              default        return state          const Test        gt      const   cnt  increase  substract     useContext CounterContext      useEffect      gt        listener   substract           return        lt button       onClick       gt            increase                  gt         cnt       lt  button gt             type   quot INCREASE quot   payload  1   type   quot SUB quot   payload  1     expected  cnt  0    cnt   -1

User · Answer

You might try using a library like redux-saga  It allows for a very clean way to sequence async functions  fire off actions  use delays and more  It is very powerful

User · Answer

Starting another dispatch before your reducer is finished is an anti-pattern  because the state you received at the beginning of your reducer will not be the current application state anymore when your reducer finishes  But scheduling another dispatch from within a reducer is NOT an anti-pattern  In fact  that is what the Elm language does  and as you know Redux is an attempt to bring the Elm architecture to JavaScript  Here is a middleware that will add the property asyncDispatch to all of your actions  When your reducer has finished and returned the new application state  asyncDispatch will trigger store dispatch with whatever action you give to it     This middleware will just add the property  quot async dispatch quot  to all actions const asyncDispatchMiddleware   store   gt  next   gt  action   gt      let syncActivityFinished   false    let actionQueue          function flushQueue         actionQueue forEach a   gt  store dispatch a       flush queue     actionQueue              function asyncDispatch asyncAction        actionQueue   actionQueue concat  asyncAction         if  syncActivityFinished          flushQueue                 const actionWithAsyncDispatch       Object assign     action    asyncDispatch        const res   next actionWithAsyncDispatch      syncActivityFinished   true    flushQueue       return res      Now your reducer can do this  function reducer state  action      switch  action type        case  quot fetch-start quot         fetch  wwww example com            then r   gt  r json             then r   gt  action asyncDispatch   type   quot fetch-response quot   value  r           return state       case  quot fetch-response quot         return Object assign     state    whatever  action value

User · Answer

Dispatching an action within a reducer is an anti-pattern  Your reducer should be without side effects  simply digesting the action payload and returning a new state object  Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects   Sounds like your initialized AudioElement class and the event listener belong within a component rather than in state  Within the event listener you can dispatch an action  which will update progress in state   You can either initialize the AudioElement class object in a new React component or  just convert that class to a React component   class MyAudioPlayer extends React Component     constructor props        super props        this player   new AudioElement  test mp3         this player audio ontimeupdate   this updateProgress         updateProgress             Dispatch action to reducer with updated progress         You might want to actually send the current time and do the        calculation from within the reducer      this props updateProgressAction           render             Render the audio player controls  progress bar  whatever else     return  lt p gt Progress   this props progress  lt  p gt          class MyContainer extends React Component      render          return  lt MyAudioPlayer updateProgress  this props updateProgress    gt          function mapStateToProps  state    return        return connect mapStateToProps      updateProgressAction    MyContainer     Note that the updateProgressAction is automatically wrapped with dispatch so you don t need to call dispatch directly

[reactjs] Can I dispatch an action in reducer?

Examples related to reactjs

Examples related to redux

Examples related to reducers