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 = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

Hippodrome

What is AudioElement? It seems like that shouldn't be something in state. – Dabney

it is an ES6 plain class (no react), holding an Audio Object. If it wouldn't be in the state, how would I control play/stop, skipping etc. ? – Hippodrome

You might want to look into redux saga – Stepheniestephens

Answer 1

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 <p>Progress: {this.props.progress}</p>;
  }
}

class MyContainer extends React.Component {
   render() {
     return <MyAudioPlayer updateProgress={this.props.updateProgress} />
   }
}

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.

Dabney

thank you very much for the clarification! But I still don't know how to access the dispatcher. I always used the connect method from react-redux. but I don't know how to call it in the updateProgress method. Or is there another way to get the dispatcher. maybe with props? thank you – Hippodrome

No problem. You can pass in the action to the MyAudioPlayer component from the parent container that is connected with react-redux. Check out how to do that with mapDispatchToProps here: github.com/reactjs/react-redux/blob/master/docs/… – Dabney

ahhh nice, now I get the concepts! It works! thank you very much! It is still all mystic magic for me :) – Hippodrome

Where is the symbol updateProgressAction defined in your example? – Butyl

If you're not supposed to dispatch an action within a reducer, then is redux-thunk breaking the rules of redux? – Mikael

What happens if you need to know what your current state is to know when to dispatch? For example fetching normalised data. Sometimes you are fetching and you get a response with references. These references point to other data that you need to further fetch. However you don't just want to dispatch within the same async action, since you also need to know your current state to see if you already have that state partially. – Fulvia

@EricWiener I believe redux-thunk is dispatching an action from another action, not the reducer. #35411923 – Tautologize

Answer 2

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 "async dispatch" to all actions
const asyncDispatchMiddleware = store => next => action => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach(a => 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 "fetch-start":
      fetch('wwww.example.com')
        .then(r => r.json())
        .then(r => action.asyncDispatch({ type: "fetch-response", value: r }))
      return state;

    case "fetch-response":
      return Object.assign({}, state, { whatever: action.value });;
  }
}

Monastery

Marcelo, your blog post here does a great job describing the circumstances of your approach, so I'm linking to it here: lazamar.github.io/dispatching-from-inside-of-reducers – Irreligion

This was exactly what I needed, except the middleware as-is breaks dispatch which should return the action. I changed the last lines to: const res = next(actionWithAsyncDispatch); syncActivityFinished = true; flushQueue(); return res; and it worked great. – Trinitrocresol

If you're not supposed to dispatch an action within a reducer, then is redux-thunk breaking the rules of redux? – Mikael

How does this work when you try to handle websocket responses? This is my reducer export default (state, action) => { const m2 = [ ...state.messages, action.payload ] return Object.assign({}, state, { messages: m2, }) } and I STILL get this error "state mutation was detected in between dispatches" – Heeltap

You are literally making an HTTP API call from within your reducer claiming it's right thing to do while describing something as anti-pattern? What!? You should never do anything with any side effect from your reducer function! Here is Redux 101: Redux Fundamentals, Part 6: Async Logic and Data Fetching (I don't understand how this answer got this many upvotes and also how no one has ever called out on it since this many years. Am I missing something?) – Heidiheidie

Answer 3

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!

Veta

can you specify how to achieve 'scheduling another dispatch inside reducer' with redux-saga? – Shoestring

@Shoestring can you explain a little more what you're wanting to accomplish? If you're trying to use a reducer action to dispatch another action, you won't be able to without something akin to redux-saga. – Veta

For example, suppose you have a item store where you have loaded a part of the items. Items are loaded lazily. Assume an item has a supplier. Suppliers also loaded lazily. So in this case there might be an item which its supplier hasn't been loaded. In an item reducer, if we need to get information about an item which hasn't been loaded yet, we have to load data from server again through an reducer. In that case how does redux-saga help inside a reducer? – Shoestring

Ok, let's say you wanted to fire off this request for supplier info when the user attempts to visit the item details page. Your componentDidMount() would fire off a function that dispatches an action, say FETCH_SUPPLIER. Within the reducer, you may tick on something like a loading: true to show a spinner while the request is made. redux-saga would listen for that action, and in response, fire off the actual request. Utilizing generator functions, it can then wait for the response and dump it into FETCH_SUPPLIER_SUCCEEDED. The reducer then updates the store with supplier info. – Veta

Answer 4

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

Offenbach

Answer 5

Redux Toolkit now has a createListenerMiddleware.

A Redux middleware that lets you define "listener" entries that contain an "effect" callback with additional logic, and a way to specify when that callback should run based on dispatched actions or state changes.

It's intended to be a lightweight alternative to more widely used Redux async middleware like sagas and observables.

See https://redux-toolkit.js.org/api/createListenerMiddleware

Example of how to dispatch an action in response to a failed api call using createListenerMiddleware from @reduxjs/toolkit:

// Create a new file src/app/ListenerMiddleware.ts with this content.
import { createListenerMiddleware } from '@reduxjs/toolkit'

export const listenerMiddleware = createListenerMiddleware()

// Add the listenerMiddleware in src/app/store.ts
import { listenerMiddleware } from './ListenerMiddleware';

const store = configureStore({
  // Existing code omitted. Add the line below.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})

// In your slice file as src/features/user/UserSlice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { listenerMiddleware } from '../../app/ListenerMiddleware';

export const userSlice = createSlice({
  name: 'user',
  // initial state, reducers and extraReducers
})
// exports code omitted.

export const fetchSomeApi = createAsyncThunk('user/fetchSomeApi', async () => {
  // Make an api call and return response data.
})

const someCodeWithSideEffects = createAsyncThunk('user/someCodeWithSideEffects', async (youCanPassData: string) => {
  // Code to run if fetchSomeApi was rejected.
})

// Use listenerMiddleware to subscribe to the fetchSomeApi.rejected action and dispatch another action.
listenerMiddleware.startListening({
  actionCreator: fetchSomeApi.rejected,
  effect: async (action, listenerApi) => {
    const payload = action.payload
    await listenerApi.dispatch(someCodeWithSideEffects('some input'));
  },
})

Randallrandan

Answer 6

Since anything is technically possible, you can do it. But you SHOULD NOT do it.

Here is a quote from Dan Abramov (the creator of Redux):

"Why would you want to dispatch inside a reducer? It's grossly misusing the library. It's exactly the same as React doesn't allow you to setState inside render."

From "Forbid dispatch from inside a reducer" Github ticket that he himself created

Heidiheidie

For any newcomer, React now does allow you to set state in render, at least in functional components (as long as it's conditional and doesn't causes infinite loop), moreover, it's one of recommended ways to adjust state when prop changes – Cymophane

Answer 7

Dispatching and action inside of reducer seems occurs bug.

I made a simple counter example using useReducer which "INCREASE" is dispatched then "SUB" also does.

In the example I expected "INCREASE" is dispatched then also "SUB" does and, set cnt to -1 and then continue "INCREASE" action to set cnt to 0, but it was -1 ("INCREASE" was ignored)

See this: https://codesandbox.io/s/simple-react-context-example-forked-p7po7?file=/src/index.js:144-154

let listener = () => {
  console.log("test");
};
const middleware = (action) => {
  console.log(action);
  if (action.type === "INCREASE") {
    listener();
  }
};

const counterReducer = (state, action) => {
  middleware(action);
  switch (action.type) {
    case "INCREASE":
      return {
        ...state,
        cnt: state.cnt + action.payload
      };
    case "SUB":
      return {
        ...state,
        cnt: state.cnt - action.payload
      };
    default:
      return state;
  }
};

const Test = () => {
  const { cnt, increase, substract } = useContext(CounterContext);

  useEffect(() => {
    listener = substract;
  });

  return (
    <button
      onClick={() => {
        increase();
      }}
    >
      {cnt}
    </button>
  );
};

{type: "INCREASE", payload: 1}
{type: "SUB", payload: 1}
// expected: cnt: 0
// cnt = -1

Amazon