- What is redux ? - Redux Principles - Data Flow in Redux - Understanding Action, Reducers, Store - Data flow in React-Redux App - Demo Redux Utilities

1. ReduxJS
Kavit Shah

2. Topics
What is redux ?
Redux Principles
Data Flow in Redux
Understanding Action, Reducers, Store
Data flow in React-Redux App
Demo
Redux Utilities

3. React philosophy
UI is most predictable when it’s the pure function of state. React solves this problem.
Redux is the data/state management library.
Redux attempts to make state mutations predictable by imposing certain restrictions on how and when state updates can
happen.
UI = f (state)
What is Redux?

4. What is redux?
On the Front end you have to manage states mutations happening either synchronously or asynchronously.
States management includes managing
Server side data
Locally created data which is not persisted on the server
Cached data
the active route, the selected tab, whether to show a spinner or not, should pagination controls be displayed etc…

5. Mixing state mutations and asynchronicity is like mixing mentos and coke.

6. Redux Principles
1. Single source of truth - The state of your whole application is stored in an object tree within a single
STORE.
1. State is read-only - The only way to mutate the state is to dispatch an action, an object describing what
happened called ACTION.
1. Changes are made with pure functions - To specify how the state tree is transformed by actions, you
write pure REDUCER.

7. Data Flow In Redux

8. State Tree For Simple Todo List
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
id: 1,
text: 'Lets make G2M Awesome',
completed: false
},
...
]
}
Mapping between state tree and reducers

9. Data Flow In Redux

10. Actions
Actions is information that send data from your application to your store.
They are the only source of information for the store.
You send them to the store using store.dispatch().
Actions must have a type property that indicates the type of action being performed.
Flux-standard-action is one approach on how to construct your actions.
For example,
{
type: 'TOGGLE_TODO',
index: 5
}
{
type: 'ADD_TODO',
text: 'Complete Code Review'
}
{
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
}

11. Action Creator
dispatch(addTodo(text))
Synchronous Action Creator Asynchronous Action Creator
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
function addTodo(text) {
return ajax.postJSON({
type: ADD_TODO,
text
});
}

12. Data Flow In Redux

13. Reducers
Reducers specify how the application’s state changes in response to dispatched action.
Reducer is a function which has the following signature :
(previousState, action) => newState

14. Reducer Example
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return {
...state,
visibilityFilter: action.filter
}
case ADD_TODO:
return {
state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
Things not to do inside reducers.
● Mutate the state.
● Perform side effects like API calls and routing
transitions;
● Call impure functions, e.g. Date.now() or
Math.random().
Note:
We always return the previous state for default case.

15. Data Flow In Redux

16. Store
The Store is the object that actions and reducers together. The store has the following responsibilities:
Holds application state;
Allows access to state via getState();
Allows state to be updated via dispatch(action);
Registers listeners via subscribe(listener);
Handles unregistering of listeners via the function returned by subscribe(listener).
Redux store implementation

17. Store
Store
Reducer
{
…
contacts: {}
}

18. Data Flow In Redux

19. Data Flow in React-Redux
Presentational component
( Render using updated state )
Container component
store.dispatch(action())
Reducers
(currentState, action) => nextState
State tree
Event handler
Event emitter

20. Demo
Simple redux counter without UI
Simple react-redux counter with UI

21. Demo II
Simple redux todo app without UI
Simple react-redux todo app with UI version 1
Simple react-redux todo app with UI, with separate presentational and container
components

22. Utilities
Name of utility Name of the function Use case of the function
redux-actions ● createAction To create action object with given type and the
payload
react-redux ● Provider
● Connect
Provider - passes store via context
Connect - generates container components
from presentational components
redux-create-reducer ● createReducer Creats a mapping between reducer and event
type. Hence, you don’t have to manage the
mapping
redux ● combineReducers Generates a root reducer from the given set of
reducers

23. Learning resources
● ReduxJS
● [video] Getting started with redux
● [video] React with redux