Basics of Redux

What is Redux ???

Before we start Redux first we know Flux and Elm because redux internally uses these technologies.

Flux: Flux is the application architecture that Facebook uses for building client-side web applications.

Elm: Elm is a functional language that compiles to JavaScript.

Redux: Redux is a Flux implementation that remove complicity of flux and use the Elm logic, the basic idea of redux is the entire application state is kept on single store, redux run in different environment (Clint, Server, Native).

Core concept of Redux

• State
• Action
• Store
• Pure/Impure functions
• Reduce

State

In redux, all the application state is stored as a single object, its a good idea to think of its shape before writing any code, the shape of state is up to you it can be array, object, or whatever you want, the state object in redux is immutable / read only, you cannot mutate the state object but return the new object if state changes.

Action

Action is plain JavaScript object, actions are payloads of information that send data from your application to your store, the structure of object is up to you, action must have a type property that indicates the type of action being performed, type should typically be defined as string constants.

Store

A store holds the whole state tree of your application, the only way to change the state inside it is to dispatch an action on it, a store is not a class, It's just an object with a few methods on it.

• getState
• dispatch
• subscribe
• replaceReducer

Pure/Impure functions

Pure functions: A pure function doesn't depend and doesn't modify the states of variables out of its scope, doesn't have any side effect, doesn't have any observable like (Network access, DB call), doesn't modify the value that is pass as argument.

Impure functions: They may have side effect, maybe access network or perform curd operation, operate the DOM, they may overwrite the value that you as argument.

Reducer

Reducers are just pure functions that take two arguments and return the next state.

arguments.

• Previous State.
• Action.

Remember to return new state objects, instead of mutating the previous state, you can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree.

Principal of Redux

Three principal of Redux.

1. Single source of truth.
2. State is read only.
3. Changes are made with pure functions.

Single source of truth

The state of your whole application is stored in an object tree within a single store,

this makes it easy to create universal apps, a single state tree also makes it easier to debug or inspect an application, it also enables you to persist your app's state in development, for a faster development cycle.

State is read only

The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions

To specify how the state tree is transformed by actions, you need to write pure reducers.