home
reduxjs cheat sheet
State Container for JS Apps.
print

Redux version: 4.0.5 - Date April 2020

GENERAL GUIDELINE

Why Redux?: With Redux we manage a single one global store at our application and with this we can deal with the communication's limitation of unidirectional flux between father and child components.

Single source of truth: only one state
State is immutable (read-only): only an action can trigger a change, you can't do it directly
Changes are made with pure functions: only the reducers can transform the state

Redux Flow Concept

gitZone

  • State Data that you will consume to manipulate your interface (UI)
  • UI (View) Interface that will be modified according to your state
  • Actions (Dispatch) Every action that calls your reducer to mutate your state
  • Reducer A function (or group of functions) that will mutate the data and send the new data to the store
  • Store Holds the whole state tree of your application

Updated 23 April 2020

Installation

npm install redux

If you work into a React App, react-redux provides an easy integration. Take a look. npm install react-redux

Creating a new store

!The store is always a global var 
import { createStore } from 'redux'; 
const store = createStore();

Creating reducers and state

The reducer will validate the action's type and then will return the new state

!You should have an initial state when we define the reducer 
function yourReducer(state = 'Sii-Canada' , action){
    switch(action.type){
        case 'UPPERCASE':
            return state.toUpperCase(); //SII-CANADA
        case 'LOWERCASE':
            return state.toLowerCase(); //sii-canada
        default:
            return state
    }
}
const store = createStore(yourReducer);

Creating actions and getting updated data

An action is a generic object that by convention has the following props:
type: the function type, commonly is a string.
payload: data that we can use to update the state, here you can pass anything.

store.dispatch({type: 'UPPERCASE', payload:...}) //our action
store.subscribe(() => console.log(store.getState())) //our new data -> SII-CANADA
reduxjs cheat sheet

API - createStore()

Why: it's the base method
Return: a store object

Argument Description
Reducer your reducer function / combineReducers
[state] your initial state, if you don't set it here, you must set it as a default value into your reducer declaration (optional)
[enhancer] a middleware function (optional) 
const store = createStore(reducer,state,enhancer)

API - combineReducers()

Why: to combine various reducers
Arguments: object with at least two reducers
Return: one reducer to rule them all 

const rootReducer = combineReducers({reducerA, reducerB, reducerC})

API - applyMiddleware()

Why: to be able to deal with async data
Arguments: a middleWare function
Return: a store enhancer

const store = createStore(reducer,state, applyMiddleware(yourMiddleware))

API - bindActionCreators()

Why: to pass action creators to a component that isn't aware of Redux and you don't want to pass dispatch
Arguments: an action creator and a dispatch function avaible on the store
Return: a dispatch function mutated with the passeds action creators

bindActionCreators(YoursActionsCreators, dispatch)

API - compose()

Why: to combine several store enhancers
Arguments: the functions to combine
Return: one single enhancer function

const store = createStore(
  reducer,
  compose(applyMiddleware(thunk), DevTools.instrument()) //example with redux-thunk as middleware and developer tools from redux-devtools
)

Store API - getState()

Why: to have access to the current data
Arguments: none
Return: your state data

const myState = store.getState();

Store API - dispatch()

Why: to inform your reducer that you need to mutate the state
Arguments: action object
Return: object with the dispatched action

!Every action must have a type property. 
store.dispatch({type: 'UPPERCASE', payload: ''})

Store API - subscribe()

Why: to know when there is a new data
Arguments: a listener function
Return: a function that unsubscribes the listener

function handler(){
    /*here we get the new data with store.getState()*/
}
const unsubscribe = store.subscribe(handler);
unsubscribe()