7 Redux challenges
Transcript of 7 Redux challenges
![Page 1: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/1.jpg)
7 Redux Challenges
Jan 20, 2016
![Page 2: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/2.jpg)
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
![Page 3: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/3.jpg)
ReduxPredictable 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
![Page 4: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/4.jpg)
ReduxLive 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!
![Page 5: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/5.jpg)
Functional Revolution
![Page 6: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/6.jpg)
React.js lifecicle
![Page 7: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/7.jpg)
Redux Challenges
Cancelling Promises, server-side (isomorphic) rendering with async calls
#1 Async programming
Research why libraries like superagent-bluebird-promise existshttps://github.com/KyleAMathews/superagent-bluebird-promise
Redux on the Serverhttp://rackt.org/redux/docs/recipes/ServerRendering.html
![Page 8: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/8.jpg)
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
![Page 9: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/9.jpg)
Redux Challenges
two-way binding problem
#3 Working with url bar
If possible, avoid using react routing, rackt history, etcDo you really need to put all app functionality in one SPA?
Can you separate user account management from main app?
![Page 10: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/10.jpg)
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
![Page 11: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/11.jpg)
Redux Challenges
React/Redux community claims to be functional ... OOP, classes, callbacks, etc are commonplace ...
#5 Imperative side-effects
Study Functional Programming in ES6https://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/
![Page 12: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/12.jpg)
Redux Challenges
Overhead with action creator, reducer aka "100 lines of Redux problem”
#6 Mental Overhead
Read redux source code it!
![Page 13: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/13.jpg)
Redux Challenges
#7 Redux Saga problem
Do you really need reactive streams?
![Page 14: 7 Redux challenges](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fbb401a28abe57d8b89f7/html5/thumbnails/14.jpg)
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/