Action Payloads and Creators in Redux

What is Action?

Actions are JavaScript object that contains information. Actions are the only source of information for the store. It basically carries a payload of information from the application to the store. It only tells us what has happened. Actions have a "type" property that they must include as type property tells what kind of action to perform. Action can also have property like the payload to describe the action.

Syntax:

const Actions = {
    type: "",
    payload: "",
};

In the syntax, the Action object has two properties. The first property is type, it should be defined in string constraint, and it is compulsory to include the type property in the object. The second one is payload, this property stores the additional information about what had happen. It is not a compulsion to include payload in the object. It is entirely up to you, but we should always try to pass only the necessary information to the action object and try to keep it as light as possible.

Why should type be a string, or at least serializable? Why should my action types be constants?

As with state, serializable actions enable several of Redux's defining features, such as time travel debugging, and recording and replaying actions. Using something like a Symbol for the "type" value or using instance of checks for actions themselves would break that. Strings are serializable and easily self-descriptive, and so are a better choice. Note that it is okay to use Symbols, Promises, or other non-serializable values in an action if the action is intended for use by middleware. Actions only need to be serializable by the time they actually reach the store and are passed to the reducers.

We can't reliably enforce serializable actions for performance reasons, so Redux only checks that every action is a plain object, and that the type is defined. The rest is up to you, but you might find that keeping everything serializable helps debug and reproduce issues.

Encapsulating and centralizing commonly used pieces of code is a key concept in programming. While it is certainly possible to manually create action objects everywhere, and write each "type" value by hand, defining reusable constants makes maintaining code easier. Source

Action Creators

Action creators are the function that creates actions. So, actions are the information and action creator are functions that return these actions. These functions help us to achieve reusability in our code.

Example-1:

// action creator
const increment = () => {
    return {
        type: "increment",
        payload: 5,
    };
};

// dispatching
store.dispatch(increment())

But what if we have multiple Action Creators, how will we bind multiple Action creators to store. For that redux have bindActionCreators() method. This is a utility function that takes an action creator or a whole object of action creators and binds them all to the dispatch function that we got from a store. For example, a to-do list will have multiple action creators.

Example-2:

// binding multiple action creators
const boundToDoActions = bindActionCreators(
    {
        add: AddToDo,
        remove: RemoveToDo,
        clear: ClearToDos,
    },

    // dispatching
    store.dispatch()
);

✅ Click here to learn more about redux.

Conclusion:

In this article we discussed about action, properties in action and action creator.

Wrap up

Thank you for reading.

If you find this helpful, leave a like, share, and follow me, @srafsan to read more articles.