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.

Modular development with redux

840 views

Published on

A high level abstraction about how to develop with modules using redux. How to think when designing components, and how to wire them in order to build your app and be able to reuse your code easily

Published in: Software
  • Be the first to comment

Modular development with redux

  1. 1. Redux for modular development
  2. 2. Who am I? +10 years developing mostly in rails but also java, js, python, php, haskell, C++ I don’t appreciate programming languages more than I would appreciate a hammer. Likes beer, guitar, business, technology, music, learning, dancing, F1, poker, reading, biking, superheroes, movies, tv series, wine, food. @eLafo linkedin, twitter, github...
  3. 3. Data Presentation Logic
  4. 4. 0 0 3 3
  5. 5. 4^4 = 256different possible global states
  6. 6. What are we going to see? Some basics we should know How I understand a component How do we wire components to build a high order component -or app with redux. Advantages Warnings
  7. 7. EXAMPLE
  8. 8. 0 DO NOT PRESS!
  9. 9. 1 RELEASE!
  10. 10. 1 DO NOT PRESS!
  11. 11. 0 DO NOT PRESS!
  12. 12. DO NOT PRESS! 0
  13. 13. 0 DO NOT PRESS! Button pressed
  14. 14. 0 DO NOT PRESS! Button pressed
  15. 15. 0 DO NOT PRESS! Button pressed
  16. 16. 0 DO NOT PRESS! Button pressed Text: Press! Button: green background: red Counter: 1
  17. 17. 1 RELEASE! Button pressed Text: Press! Button: green background: red Counter: 1
  18. 18. 1 RELEASE!
  19. 19. 1 RELEASE!
  20. 20. RELEASE! Button released 1
  21. 21. Button released RELEASE! 1
  22. 22. Button released RELEASE! 1
  23. 23. Button released RELEASE! 1 Text: Press! Button: green background: red Counter: 1
  24. 24. 1 DO NOT PRESS! Button released Text: Press! Button: green background: red Counter: 1
  25. 25. View Presentation in whichever flavour (React, Angular, JS, JQuery...) DO NOT PRESS!
  26. 26. Presentation Data / State ActionCreators (events) 1 DO NOT PRESS! Presentational component Functional component
  27. 27. Actions This should be the easy part Button released Button pressed
  28. 28. Managing state change
  29. 29. This is a new state. The input is copied before doing any change
  30. 30. State = f(state, action)
  31. 31. State = f(state, action)
  32. 32. Pure function Return value is only determined by its input values, without observable side effect
  33. 33. reducer.js selectors.js actionTypes.js Component creator tookit Data Data Data Presentational components Functional components Slot for selector State input Slot for action creators config.js types.js actions.js
  34. 34. Data
  35. 35. Data Presentation Logic
  36. 36. Presentation Logic Presentation Logic Presentation Logic Presentation Logic Presentation Logic Presentation Logic State / Data
  37. 37. dispatch
  38. 38. dispatch
  39. 39. dispatch
  40. 40. dispatch
  41. 41. reducers root reducer State
  42. 42. reducers root reducer State
  43. 43. State reducers root reducer
  44. 44. State reducers root reducer
  45. 45. State reducers root reducer
  46. 46. State reducers root reducer
  47. 47. State reducers root reducer
  48. 48. State reducers root reducer
  49. 49. State reducers root reducer
  50. 50. State reducers root reducer
  51. 51. REDUX is a library for implementing a Design Pattern
  52. 52. REDUX attempts to make state mutations predictable
  53. 53. Inspired by Flux, CQRS and Event Sourcing
  54. 54. Redux Principles Single source of truth State is read-only Changes are made by pure functions
  55. 55. Single source of truth Redux principles The state of your whole application is stored in an object tree within a single store.
  56. 56. State is read- only Redux principles The only way to change the state is to emit an action, an object describing what happened.
  57. 57. Changes are made by pure functions Redux principles To specify how the state tree is transformed by actions, you write pure reducers.
  58. 58. http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9
  59. 59. UI = f(state) State = f(state, action) Functional programming all around
  60. 60. actions/ todos.js components/ todos/ TodoItem.js ... constants/ actionTypes.js reducers/ todos.js index.js rootReducer.js todos/ components/ actions.js actionTypes.js constants.js index.js reducer.js index.js rootReducer.js http://jaysoo.ca/2016/02/28/organizing-redux-application/
  61. 61. Can’t be that good...
  62. 62. Side effects
  63. 63. Side effects ● Turn promises into actions (one for each state)
  64. 64. http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/24
  65. 65. Side effects ● Turn promises into actions (one for each state) ● Redux-thunk
  66. 66. http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9
  67. 67. redux-thunk http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/25
  68. 68. Side effects ● Turn promises into actions (one for each state) ● Redux-thunk ● redux-api-middleware
  69. 69. http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9
  70. 70. redux-api-middleware http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/25
  71. 71. What we have seen Why it is so difficult to reuse code The problem when maintaining the state How to think when building components How to wire components with redux How Redux deals with state A new way of thinking?
  72. 72. Some unmeaningful code (actions) import * as config from './config' const CONNECT = config.namespace + “/CONNECT” const userIsOnline = (user) => ({ return { type: CONNECT, payload: user.id } }); import * as config form './config' const SEND_MESSAGE = config.namespace + "/SEND_MESSAGE" const sendMessage = (chatID, senderID, text) => ({ type: SEND_MESSAGE, payload: { chatID: chatID, message: { text: text, status: “sent”, timestamp: now(), senderId: senderId, messageId: getID() } } });
  73. 73. Some unmeaningful code (reducers) import * as t from './actionTypes' const usersReducer = (state = initialState, action) => { let newState = _.clone(state); switch (action.type) { case t.CONNECT newState[t.payload.id].status = 'online'; return newState; default: return state } }; import * as t from './actionTypes' const chatsReducer = (state = initialState, action) => { let newState = _.clone(state); switch (action.type) { case t.SEND_MESSAGE: newState[t.payload.chatID].messages.push(t.payload.message); return newState; default: return state } };
  74. 74. Some unmeaningful code (Wiring up) //main.js import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import { createStore } from 'redux'; import AppContainer from './app/containers/AppContainer'; import reducer from './rootReducer'; import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin(); //we create the store and tell it which root reducer to use let store = createStore(reducer); //We create the root component and ReactDOM.render( <Provider store={store}> <AppContainer /> </Provider>, document.getElementById('app') ); //rootReducer.js import { combineReducers} from 'redux'; import users from './users'; import chats from './chats'; const combinedReducers = combineReducers({ [users.config.namespace] : users.reducer, [chats.config.namespace] : chats.reducer })
  75. 75. Resources and further reading http://redux.js.org/ https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f#.fua79muzx https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks http://softwareengineering.stackexchange.com/questions/235558/what-is-state-mutable-state-and-immutable-state https://daveceddia.com/timeline-for-learning-react/ http://www.yegor256.com/2016/08/15/what-is-wrong-object-oriented-programming.html https://datarockets.com/blog/redux-structure http://jpsierens.com/tutorial-react-redux-webpack/ https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/ http://jaysoo.ca/2016/02/28/organizing-redux-application/
  76. 76. Resources and further reading http://es.slideshare.net/nikgraf/react-redux-introduction http://es.slideshare.net/benlesh1/async-redux-actions-with-rxjs-react-rally-2016 http://es.slideshare.net/nirkaufman/redux-with-angular-2-workshop-2016 http://es.slideshare.net/fdaciuk/designing-applications-with-redux http://es.slideshare.net/FDConf/redux-from-twitter-hype-to-production-61102006 http://es.slideshare.net/justingordon/react-on-rails-v4032 http://es.slideshare.net/rolandkuhn/reactive-streams
  77. 77. Thank you!!! http://aspcamp.aspgems.com

×