Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ReduxJS
Kavit Shah
Topics
What is redux ?
Redux Principles
Data Flow in Redux
Understanding Action, Reducers, Store
Data flow in React-Redux ...
React philosophy
UI is most predictable when it’s the pure function of state. React solves this problem.
Redux is the data...
What is redux?
On the Front end you have to manage states mutations happening either synchronously or asynchronously.
Stat...
Mixing state mutations and asynchronicity is like mixing mentos and coke.
Redux Principles
1. Single source of truth - The state of your whole application is stored in an object tree within a sing...
Data Flow In Redux
State Tree For Simple Todo List
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
id: 1,
text: 'Lets make G2M Awesome',
completed...
Data Flow In Redux
Actions
Actions is information that send data from your application to your store.
They are the only source of information...
Action Creator
dispatch(addTodo(text))
Synchronous Action Creator Asynchronous Action Creator
function addTodo(text) {
ret...
Data Flow In Redux
Reducers
Reducers specify how the application’s state changes in response to dispatched action.
Reducer is a function whic...
Reducer Example
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return...
Data Flow In Redux
Store
The Store is the object that actions and reducers together. The store has the following responsibilities:
Holds appl...
Store
Store
Reducer
{
…
contacts: {}
}
Data Flow In Redux
Data Flow in React-Redux
Presentational component
( Render using updated state )
Container component
store.dispatch(action...
Demo
Simple redux counter without UI
Simple react-redux counter with UI
Demo II
Simple redux todo app without UI
Simple react-redux todo app with UI version 1
Simple react-redux todo app with UI...
Utilities
Name of utility Name of the function Use case of the function
redux-actions ● createAction To create action obje...
Learning resources
● ReduxJS
● [video] Getting started with redux
● [video] React with redux
Upcoming SlideShare
Loading in …5
×

Getting started with Redux js

268 views

Published on

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

Published in: Software
  • Be the first to comment

Getting started with Redux js

  1. 1. ReduxJS Kavit Shah
  2. 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. 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. 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. 5. Mixing state mutations and asynchronicity is like mixing mentos and coke.
  6. 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. 7. Data Flow In Redux
  8. 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. 9. Data Flow In Redux
  10. 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. 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. 12. Data Flow In Redux
  13. 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. 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. 15. Data Flow In Redux
  16. 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. 17. Store Store Reducer { … contacts: {} }
  18. 18. Data Flow In Redux
  19. 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. 20. Demo Simple redux counter without UI Simple react-redux counter with UI
  21. 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. 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. 23. Learning resources ● ReduxJS ● [video] Getting started with redux ● [video] React with redux

×