What is a difference between action,reducer and store in redux?

Question

I am new to react/redux. I am trying to figure out how all the pieces in redux interact. The one thing giving me trouble is understanding the relation between actions and reducers,store.

Vedette

I see you’ve bountied this. Is there anything in particular that’s lacking from the current answers? – Clough

Answer 1

It's pretty simple when you think about it:

• Store - is what holds all the data your application uses.
• Reducer - is what manipulates that data when it receives an action.
• Action - is what tells reducer to manipulate the store data, it carries the name and (optionally) some data.

Reducer is usually in the format of a switch statement that switches between all possible Actions (cases) and then manipulates the Store data based on the action. When reducer data changes within redux, the properties in your components are changed and then the re-rendering occurs.

Rox

Answer 2

• Store -> A Globalized state
• Action -> What you wanna do, eg: event click
• Reducer -> Describes how your action transfers state into the next state. It checks which action took place and based on the action it updates the store.
• Dispatch -> Way how we execute the action. eg: Dispatch the action to the reducer. Then reducer will check what to do and the store gets updated.

Bamby

Answer 3

Store An Object that holds the applications state data

Reducer A function that returns some state data. Is triggered by an action type

Action An object that tells the reducer how to change the state. It must contain a type property. It can optionally contain a payload property

Calloway

I want to add to "action", that the type property it contains is used by the reducer to determine the type of action that you take inside the reducer. The most common pattern for this is to accept the action as a parameter in the reducer, and use a switch statement on action.type to determine exactly what you want to do to the store (global state) – Agnomen

Answer 4

The actions, reducers and stores are the three building blocks of redux.

Actions: Actions are the only source of information for the store. Actions have a type field that tells what kind of action to perform and all other fields contain information or data. And there is one other term called Action Creators, these are the function that creates actions. So actions are the information (Objects) and action creator are functions that return these actions.

Reducers: As we already know, actions only tell what to do, but they don’t tell how to do, so reducers are the pure functions that take the current state and action and return the new state and tell the store how to do.

Store: The store is the object which holds the state of the application.

I found this link to be particularly helpful - https://www.geeksforgeeks.org/introduction-to-redux-action-reducers-and-store/

Swanskin

Answer 5

Imagine a situation where you want your class based components to share data among each other. They may even bring changes to the data. One may provide data to others in the form of props. But it very difficult to keep track of the name of the props and the structure of data.

The Store actually simplifies this stuff. You set up your application architecture in such a way that the components will get their data from the supply what is known as the Store. Actually, the mechanism is so smart the component will re-render itself when the data changes since the components are all ears.

And Actions are nothing but the carriers of data from your application to the store.

And it is very difficult to articulate the concept of reducers. You may imagine a real store where one puts different stuff for future use. The store is of no use when the stuff is put haphazardly. One may spend hours inside but may not find anything. The Reducers in simple terms manage the way data is kept in store provided by the actions.

Mutualism

Answer 6

according to redux documents:

• store: The whole global state of your app is stored in an object called store.
• dispatcher: To change something in the state, you need to dispatch an action. (and that is what dispatcher does)
• action: An action is a plain JavaScript object that describes the kind of change to make (as dictated by action.type) to the store and the relevant payload required for that change.
• reducer: to tie state and actions together, we write a function called a reducer. it’s just a (pure) function that takes state and action as arguments and returns the next state of the app.

for a deeper understanding look at the diagram in this link.

Parahydrogen

Answer 7

Actions: Actions are a plain JavaScript object that contains information. Actions are the only source of information for the store. Actions have a type field that tells what kind of action to perform and all other fields contain information or data.

Example :

function addTask(task) {
   
  return {
     
    type: 'ADD_TODO',
    task: task
  }
}

Reducers: As we already know, actions only tell what to do, but they don’t tell how to do, so reducers are the pure functions that take the current state and action and return the new state and tell the store how to do.

Example:

function task(tasks = [], action) {
   
  if (action.type === 'ADD_TODO') {
    return [...tasks, action.task];
  } else if (action.type === 'REMOVE_TODO') {
      return tasks.filter(task => task !== action.task);
    }
  return tasks;
}

Store: The store is the object which holds the state of the application.

ref: https://www.geeksforgeeks.org/introduction-to-redux-action-reducers-and-store/

Stride