REACT & REDUX

Redux allows you to manage the state with a minimal API but completely predictable behaviour – a predictable state container for JavaScript apps. Redux is a Flux implementation but that does not use Flux. It is inspired by functional programming and immutability (Elm, Clojure) and written by Dan Abramov.

Redux allows you to manage the state with a minimal API but completely predictable behaviour - a predictable state container for JavaScript apps.

Redux is a Flux implementation but that does not use Flux. It is inspired by functional programming and immutability (Elm, Clojure) and written by Dan Abramov.

Why Redux?

Redux makes you think of your application as an initial state being modified by a sequential list of actions. Redux enables tools like logging, hot reloading, time travel, record and replay with no extra work.

Redux is:

• Simple, conceptually and in file size (2kb)
• Has predictable state transitions
• Single source of truth for UI state
• Highly performant
• Easily testable

The Core Concepts of Redux

To understand Redux, we will look into the following concepts:

• Actions and action creators
• Reducers
• Store
• Middleware

Actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Actions at its core is a simple JavaScript object.

export addTodo = (todo) => {
  return {
    type: 'addTodo',
    todo
  }
}

export deleteTodo = (index) => {
  return {
    type: 'deleteTodo',
    index
  }
}

Type

The only the required field is type. Only use constants for declaring types.

Payload

The payload generally carries your data.

Action Creators

Action creators are the functions that return the body of an action.

Reducers

Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of a reducer. It updates the state according to those actions.

Reducers are pure functions with the signature (previousState, action) => newState.

import Immutable from 'immutable'

export default (state = Immutable.List(['Code More!']), action) => {
  switch(action.type) {
    case 'addTodo':
      return state.push(action.todo)
    default:
      return state
  }
}

We are using the immutable package here to make sure that the state must be immutable.

Store

Store is a wrapper around a JavaScript object (state). A store has two key methods: getState, and dispatch. If you are using something like react-redux, you don’t have to deal with these functions directly.

import { createStore } from 'redux';
import todos from './reducers/todos';

export default createStore(todos);

Middelware

If you are familiar with Node.js middleware like Express or Koa, Redux middleware works similar to them except, it solves different problems.

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

Recommended middleware: thunk, redux-promise and batched-updates.

Conclusion

Redux is powerful for building predictable, testable, maintainable interfaces. Redux makes you a better UI engineer by forcing you to handle state changes explicitly.

You can find the source code in Github: React Redux