Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Fundamentals of Redux

DZone 's Guide to

The Fundamentals of Redux

We review actions, reducers, and stores in Redux, and how they help app developers work with state in their applications.

· Web Dev Zone ·
Free Resource

Redux is a library which is used to maintain the state of an application at the application level. It reduces the complexity of managing different states of the components when the app gets comparatively larger and it provides the ability to maintain the state of different components efficiently.

Redux Works on Three Basic Principles

  1. “Single source of truth” - This means that there is only one store that has a giant object, called application state, for the entire application which resides in the store.

  2. A state is read-only - The only way to change the state is dispatching an action.

  3. Changes are made with pure functions/reducers - Dispatched actions will be received by the reducer which modifies the state in the store if required.

Action

An action is a plain JavaScript object with one mandatory field called 'type' with the provision of another field. Whenever we need to change or modify state in the store, we need to dispatch an action.

store.dispatch({type: “LOGGED_IN”, payload : {user:Id, password}}) 

Reducer

A reducer is just a pure function. which produces a state out of action and whatever the reducer returns will become the state of the application.

A pure function is a function which doesn't allow mutation of the data which is passed as the argument and if any modification is done it always returns new data in place of modifying the existing data. There should not be any API Calls or any method calls, just a pure JavaScript object that takes input as an argument and returns something.

function loggedInReducer(state={}, action){
  switch(action.type){
    case 'LOGGED_IN'' :
      return {...state, user : action.payload}
  default: 
  	return state;
  }
}

Image title

Reducers are called with two arguments. The first is the current state and the second is the action that dispatched before. Now the reducer will filter out actions and produce some amount of data as the state, and that state is going to persist in the store. In this example, if the user tries to log in and dispatch an action, that action can go through all the different reducers and persist its state or save the credentials to the store.

Store

The store holds application, we can think it as an object tree, the store allows to access the state via getState() and gives us the current state of the application method and also allow change within the store by dispatch() method.
Redux library gives a method createStore() which takes reducer as an argument by which state of the store is going to be changed.

const store = Redux.createStore(reducer); 

Image title

Basically Redux is all about managing state. All we need to do is dispatch an action, which will cause it to go to all the different reducers, and the reducers will produce some amount of data as state in the store.

Topics:
web dev ,redux tutorial ,react redux ,state management

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}