What is the main benefit of using action creators in Redux?

Question

Let's say I have an input component that will update the state from its onChange handler.

function updateInputState(newvalue) {
  return({
    type: "UPDATE_INPUT_STATE",
    payload: newValue
  });
}

function InputComponent(props) {
  
  function onChange(event) {
    const newValue = event.target.value;

    // OPTION #1 - WITHOUT AN ACTION CREATOR. DISPATCH THE ACTION DIRECTLY
    dispatch({
      type: "UPDATE_INPUT_STATE",
      payload: newValue
    });

    // OPTION #2 - WITH AN ACTION CREATOR
    dispatch(updateInputState(newValue));

  }

  return(
    <input value={props.value} onChange={onchange}/>
  );
}

I think option #2 is more readable, so why would I use an action creator instead of a regular action dispatch?

In my opinion it simply allows you to have some post treatment on your data. You might not want to use it in that case, but in an API call for example it's more frequent. It really depends on your preference. There isn't any real difference I think — Guillaume Munsch, Sep 09 '20 at 07:47
@GuillaumeMunsch thanks for your reply. Do you mean in an `async` action, like a _thunk_ from `redux-thunk`? Ex: `dispatch(loadDataFromDatabase(id))` ? — cbdeveloper, Sep 09 '20 at 07:50
In my view. If your project is small i.e where too much action creator is not presented. It okay to go with any options. But in large projects where you have lot of actions. So `actionCreator` is better option as you want data should be flow centrally. For example you crated type name `UPDATE_INPUT_STATE ` and now after some time the requirement is changed you need to update your type value and your data is also updated. In that case central action create will do and update codebase in single go. But if you use without action creator then you have to do manually(just think how hard is it) — Shubham Verma, Sep 09 '20 at 07:51
Readability, maintainability, and maybe more important, reuse-ability, i.e. DRY. Define it once, use many times. Only needs to be updated in a single place. — Drew Reese, Sep 09 '20 at 08:08

score 3 · Accepted Answer · edited Jun 26 '23 at 12:51

3

The main benefits are simplicity and maintenance, especially when it comes to async actions.

Action creators can also be asynchronous and have side-effects.

Therefore it simplifies the usage in component view:

// Lets say we suddenly want to make updateInputState async action
function InputComponent(props) {
  function onChange(event) {
    const newValue = event.target.value;
    // Edit its action creator implementation
    dispatch(updateInputState(newValue));

    // on the other hand, without action creator, you need to
    // change this code to async everywhere across the app
    dispatch({
      type: "UPDATE_INPUT_STATE",
      payload: newValue,
    });
  }

  return <input value={props.value} onChange={onchange} />;
}

Dave Ceddia makes this great point on maintainance: "when you copy-and-paste an action in multiple places, change is harder."

Notice that writing action creators is more like "an old API" you should use redux-toolkit now (2020).

edited Jun 26 '23 at 12:51

Kostas Minaidis

4,681
3
17
25

answered Sep 09 '20 at 07:55

Dennis Vash

50,196
9
100
118

Do you know how [entity adapter](https://redux-toolkit.js.org/api/createEntityAdapter) supports server side sorting and filtering? Currently I'd do it representing something like: `{ entity: { query: { 'page=1': { loading: false, ids: [1, 2, 3] } }, }, data: { 1: { loading: false, value: {} }, }, }` The entity adaptor seems to only support client side filtering and sorting – HMR Sep 09 '20 at 09:22
@HMR I have no idea about SSR :-(, you should ask the maintainer on twitter, he always responses. https://stackoverflow.com/users/62937/markerikson, https://twitter.com/acemarke – Dennis Vash Sep 09 '20 at 09:23
Not SSR but server side filtering and sorting, like `/books/?title=once&page=1&sort=author`. The examples only show getting all the data and sort or filter it on the client. In most cases this is useless since there may be a couple of million books. – HMR Sep 09 '20 at 09:53
The entity adapter is only a collection of tools for client-side data manipulation to save you some repetitive code. I does not replace anything for you to do on your server and it does not even have any overlap with making requests. – phry Sep 09 '20 at 12:44

What is the main benefit of using action creators in Redux?

1 Answers1