Redux

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript)

1 - About

Redux is a state manager.

The main component is a store that contains:

  • the state
  • function that mutates this state (the reducer).

Characteristics:

  • The whole state of your app is stored in an object tree inside a single store.
  • To specify how the actions transform the state tree, you write function called reducers.
  • The only way to change the state tree is to let the store emit (dispatch) an action (an object describing what happened)
  • You can subscribe to a store in order to update the UI in response to state changes but normally you'd use a view binding library (e.g. React Redux) that will take this work from you.

3 - Installation

3.1 - npm

npm install --save redux
npm install --save-dev redux-devtools
Advertising

3.2 - module

The module is available in the dist map : https://unpkg.com/[email protected]/dist/redux.min.js

Redux is then available as the REDUX globale variable

4 - Concept

4.1 - State

Single source of truth: The state of your whole application is stored in an object tree within a single store.

Debug:

  • An handy way to follow the state is print it after each modification:
store.subscribe(() =>
  console.log(store.getState())
)
  • or the Chrome Redux Dev tool

4.2 - Action

An action is an plain JavaScript object describing what happened.

Example of todo actions.

  • Actions need not have an type property.
{ 
    type: 'ADD_TODO', 
    text: 'Go to swimming pool' 
}
Advertising

4.3 - Reducer

A reducer takes an action as input and transforms the state into the next state.

The reducer function (state, action) ⇒ state signature takes as argument:

  • a state
  • and an action

and returns:

  • the next state.

You should not mutate the state object, but return a new object if the state changes.

You can split them off into smaller reducers that manage specific parts of the state tree.

Example:

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

A reducer creates its own context. Therefore if you return an object, you can get it as: state.myReducer.myProperty.
You can have multiple reducer and then multiple context. You need to combine them in one with the CombineReducer function.

Example:

import { combineReducers } from 'redux'
import reducer1 from './reducer1'
import reducer2 from './reducer2'
 
// Just add a command list after inscription to add more reducer
const appReducer = combineReducers({
    reducer1,
    reducer2
})
 
export default appReducer
Advertising

4.4 - Store

A store holds the state of your app. Its API is.

4.4.1 - Create

createStore(reducer, [initialState], [enhancer]) where:

  • reducer - A reducing function.
  • initialState - The initial state of the store.
  • enhancer - Can be used to enhance the Redux store and add third-party libraries
let store = createStore(counter)

4.4.2 - Subscribe

You can use subscribe() to update the UI in response to state changes. Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. However it can also be handy to persist the current state in the localStorage.

store.subscribe(() =>
  console.log(store.getState())
)

4.4.3 - Dispatch

The only way to mutate the internal state is to dispatch an action. The actions can be serialized, logged or stored and later replayed.

let action  = { type: 'INCREMENT' }
store.dispatch(action)

4.4.4 - GetState

store.subscribe(() =>
  console.log(store.getState())
)

5 - Example

  • The action will have this properties
let action = {
   type: "string" // INCREMENT or DECREMENT
}

  • The reducer. It manipulate the state which is a single variable
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
};
  • Creating a store with this reducer:
// If used in npm
// import {createStore} from 'redux'
let store = Redux.createStore(counter);
  • Subscribe to the store to see the state
store.subscribe(() =>
  console.log(store.getState())
)
  • Perform an action (dispatch)
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

6 - Documentation / Reference