Skip to content

Home

Jump to bottom Edit New page
Max Millington edited this page May 9, 2017 · 2 revisions

Redux

Redux was created as a response to the ever increasing responsibility placed on front-end JavaScript frameworks. As we want more and more of our applications to be single page, these applications must handle more and more state, be it data received from the server, locally created data, or UI state. Redux was built as an attempt to help developers better manage the state of their applications.

Redux attempts to make state mutations more predictable by implementing what it calls: The Three Principles of Redux

First Principle of Redux - Single Immutable State Tree

With Redux, we represent whole state of the application as a single JS object

Second Principle of Redux - State is Read Only

The state is read-only. This means you must dispatch an action, a plain JS object describing what will happen, to modify the state. This ensures that neither the views nor the network callbacks will ever write directly to the state.

Therefore, we must be careful to avoid mutative methods when using Redux. In our app, we are bringing in the ImmutableJS library to help, which is one of the solutions suggested by Abramov.

Third Principle of Redux - Reducer Function

Changes to the state of the application must always be made with a pure function.

The single top-level function that mutates the state of any Redux app is called the Reducer Function, which takes the previous state and an action, and then returns the next state as a new JS object. Reducers are simple pure functions, which means that its functionality can be abstracted, ordered, etc. Redux ships with a combineReducers() method to help you do this.

Store

The store holds the state of the application. Each Redux app has only one store, which has three built in methods:

  • getState() - Retrieves current state of Redux store
  • dispatch(action) - allows you to send actions that change the state of the store
  • subscribe(listener) - allows you to register a callback that redux store will call whenever action has been dispatched.

Under the hood, the store takes in the reducer as an argument, assigns the state to a variable and returns it with getState, and has an array of listeners that are updated with dispatch.

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. Actions always have a type, which describes the change to be made to the state. Actions are created by functions called Action Creators, that simple return the action.

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

dispatch(addTodo(text))

Data Flow

The data lifecycle in any Redux app follows these 4 steps:

  1. We call dispatch(action), where the 'action' is a plain object describing what happened.
  2. The store calls the reducer function we give it. The store will pass two arguments to the reducer: the current state tree and the action.
  3. The root reducer combines the output of any extant sub reducers into a single state tree.
  4. The Redux store saves the complete state tree returned by the root reducer.

Working with React

  • In react, lower level components should only be concerned with views. They should not know about implementation. Lower level components should not be aware of redux.
  • Actions that modify the state should be passed in as props using the dispatch method, which should then go up to the reducer, describing how to change the state.

Introductory Video

Dan Abramov, the creator of Redux, put together a thirty part introductory video on Redux.

https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

Immutable

Add a custom footer
Add a custom sidebar
Clone this wiki locally