Redux! Would you like to know more?

 

Thomas Kolar, Engineer @SilverTours GmbH

Overview

  • Redux Tradeoffs
  • Redux Benefits
  • Middlewares
  • Live Demo
  • Immutables
  • Thunks & Sagas  (Possible Future Talk
    on where to put in business logic in redux)

Redux Tradeoffs

  • Describe application state as plain objects and arrays.
  • Describe changes in the system as plain objects.
  • Describe the logic for handling changes as pure functions.

Redux Benefits

Persistance Layer

Persist state to a local storage and then boot up from it, out of the box.

 redux-persist 

import {persistStore, autoRehydrate} from 'redux-persist'
const store = createStore(reducer, undefined, autoRehydrate())
persistStore(store)

Comes with support for several storage engines like...
AsyncStorage for react-native ...
or  localForage for web apps.

 

 

Reproduce Bugs Like A Boss

Serialize user actions and attach them, together with a state snapshot, to automated bug reports.

Product developers can replay them to reproduce the errors.

 redux-bug-reporter 

// ES6
import { storeEnhancer } from 'redux-bug-reporter'
// ES5
var storeEnhancer = require('redux-bug-reporter').storeEnhancer

function configureStore(initialState) {
	const store = createStore(reducer, initialState, compose(
		process.env.NODE_ENV !== 'production' ? storeEnhancer : f => f,
		applyMiddleware(...middleware)
	));

	return store;
}

Prepopulate state on server

Pre-fill your state on the server.

Send the state over the network and boot from it.

Server Rendering in Redux

Collaborative Environments

Pass action objects over the network to implement collaborative environments without dramatic changes to how the code is written.

Hell! You can even pass the complete state over network!

 pouchdb &  pouch-redux-middleware

Debugging

Travel between the state history in development

Re-evaluate the current state from the action history when the code changes, a la TDD.

 redux-devtools

Undo & Redo

Maintain an undo history or implement optimistic mutations without dramatic changes to how the code is written.

Middlewares

Immutables

Immutable data cannot be changed once created


var Immutable = require('immutable');
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50

No more defensive copying!


let nextState = [...state];
// Bye, bye mutable states in reducers!

Advanced Data Structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

Object comparison


var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 2);
assert(map1.equals(map2) === true);
var map3 = map1.set('b', 50);
assert(map1.equals(map3) === false);
 immutable.js