[React_Redux] Redux – Actions

Redux Actions are where the Redux store gets a new state.

 

1. Actions

A Redux action is a source for the store. It is just a simple plain JavaScript object. The only requirement is it should have a “type” property.
In general, you have more properties as data.
const ADD_COMPANY = 'ADD_COMPANY';
// action object
{
  type: ADD_COMPANY,
  name: 'Company A'
};

 

2. Action Creators

A action creator is a function to create and return an action. The term ‘Action‘ and ‘Action Creator‘ are used interchangeably but the proper meanings of the terms are
  • Action: object
  • Action Creator: function
const addAction (name) => {
  return { 
    type: ADD_COMPANY,
    name
  };
};

 

3. store.dispatch(action)

The store.dispatch() function is used to send actions to the store. This is the only way to trigger a state change in Redux.
The important thing is that, by default, the dispatch() function gets the Action object (not a function) as a parameter.
const onClickHandler = (evt) {
  let name = evt.target.value;
  store.dispatch(addAction(name)); // action object is passed.
  // store.dispatch(addAction); --- wrong 
};

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s