7 Redux challenges
Download as PPTX, PDF3 likes1,999 views
This document discusses 7 challenges of using Redux including: 1) Async programming and cancelling promises, 2) Preventing DOM mutations from libraries, 3) Working with the URL bar in single page applications, 4) Piggybacking on componentDidMount to generate data, 5) Using imperative programming patterns rather than functional patterns, 6) Mental overhead of action creators and reducers, and 7) Determining if reactive streams from Redux Saga are needed. The author provides recommendations for addressing each challenge through further research and adopting functional programming principles.
Ad
More Related Content
What's hot (20)
Similar to 7 Redux challenges (20)
Ad
Recently uploaded (19)
Ad
7 Redux challenges
- 1. 7 Redux Challenges Jan 20, 2016
- 2. Redux Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. http://redux.js.org/ https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?series=getting-started-with-redux
- 3. Redux Predictable state container? Yes Run in different environments (client, server, and native)? Yes, on client and server. Not yet as you might expect on mobile and native Great developer experience? Yes, if you can become familiar with ES6, WebPack, Babel, npm tools
- 4. Redux Live code editing is great, if you configure WebPack with CSS Modules Time traveling debugger … hmm … not really important IMHO What’s important? Your SPA app keeps its state while you do component modifications. Welcome to Functional Programming approach!
- 7. Redux Challenges Cancelling Promises, server-side (isomorphic) rendering with async calls #1 Async programming Research why libraries like superagent-bluebird-promise exists https://github.com/KyleAMathews/superagent-bluebird-promise Redux on the Server http://rackt.org/redux/docs/recipes/ServerRendering.html
- 8. Redux Challenges Be aware of dom mutations from libraries like D3 or jQuery #2 Dom mutations Wrap and isolate side effects. Review D3 chart css and js code Use minimum
- 9. Redux Challenges two-way binding problem #3 Working with url bar If possible, avoid using react routing, rackt history, etc Do you really need to put all app functionality in one SPA? Can you separate user account management from main app?
- 10. Redux Challenges componentDidMount might causing ad-hoc effects as it dispatch actions in order to get the app to start an operation #4 Piggybacking componentDidMount Generate data on server-side, not in reducer after firing from componentDidMount
- 11. Redux Challenges React/Redux community claims to be functional ... OOP, classes, callbacks, etc are commonplace ... #5 Imperative side-effects Study Functional Programming in ES6 https://github.com/reactima/reactima-redux-ecosystem/blob/master/JS.md Google more about JS data structures, Immutable.js … Be aware it’s hard to get rid of old habits. Ramda.js source code and test are great for learning. Lodash has it all! http://ramdajs.com/ https://lodash.com/
- 12. Redux Challenges Overhead with action creator, reducer aka "100 lines of Redux problem” #6 Mental Overhead Read redux source code it!
- 13. Redux Challenges #7 Redux Saga problem Do you really need reactive streams?
- 14. Thank you! Ilya Sidorov @reactima Interested to talk? Let’s have a skype call: ilya.sidorov [email protected] https://www.linkedin.com/in/reactima https://github.com/reactima/