7 redux challenges

7 Redux Challenges

Jan 20, 2016

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

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

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!

Functional Revolution

React.js lifecicle

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

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

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?

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

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/

Redux Challenges

Overhead with action creator, reducer aka "100 lines of Redux problem

#6 Mental Overhead

Read redux source code it!

Redux Challenges

#7 Redux Saga problem

Do you really need reactive streams?

Thank you!

Ilya Sidorov @reactima Interested to talk?

Let’s have a skype call: ilya.sidorov

1@ilya1.com https://www.linkedin.com/in/reactima

https://github.com/reactima/