Introduction to Redux

(without React 😱)

Why use Redux?

⇒ complex data flow

⇒ multiple components relying on the same data

⇒ tiny simple 2kb library

3 MAIN PRINCIPLES

Three principles

⇒ one single source of truth

⇒ state is read-only

⇒ changes are made with pure functions

1: Single source of truth

⇒ 1 store per application

⇒ contains all the up to date data needed by all the components

2: State is read-only

⇒ state can only be changed with Actions

3: Pure Functions

⇒ Given the same input produce the same output

⇒ no side effects

⇒ relies on no external state

STORE

Redux Store

⇒ is a JavaScript tree object

⇒ usually a key/value map

Example

import  { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import  thunk from 'redux-thunk';

import '../scss/styles.scss';

import { notesBoard } from './notesBoard';
import { notesBoardReducer } from './reducers/notesBoard.reducer';


document.addEventListener('DOMContentLoaded', function (event) {
	notesBoard();

	const store = createStore(
	    notesBoardReducer,
	    compose(
	        applyMiddleware(thunk),
	    ),
	    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
	);
});

ACTIONS

Actions

⇒ plain objects

⇒ any code that wants to update the store must dispatch an action

REDUCERS

Reducers

⇒ a reducing function

⇒ takes in an old state and outputs a new state