This document summarizes some experiences building an Android app with React Native and Redux. It discusses the benefits of using Redux for managing global state, including improved debugging and automatic state persistence. It also notes some challenges, such as representing navigation state and avoiding unnecessary re-renders. Overall, the author believes React Native is a good choice but that there are some gotchas, especially around navigation and performance, to be aware of.

1. Some experiences building an
Android app with React Native & Redux
alex.bepple@it-agile.de @alexbepple
JSUnconf
23 April 2016

2. Why is Owdaf sexy?

3. OwDaF
“One-way reactive data flow”
“Unidirectional data flow”
Flux
Redux
…

4. Basic idea of Owdaf:
UI is a function of a global state

5. Owdaf: If you want the user to see
something different,
change the global state

6. Owdaf: UI is pure,
event handlers are passed from outside,
they dispatch actions
<Cell title={localeCandidate.label
onPress={() => setLocale(localeCandidate.locale)}
/>
setLocale: (locale) =>
dispatch(createSetLocaleAction(locale))
`setLocale` passed from outside

7. Owdaf: complete picture

8. What is React Native?
(Yes, it is React on Native.)

9. React Native

11. Some experiences with Redux

12. Owdaf is great
You change in one place,
everything gets updated
correctly.
make this clear
with stateless
React components
UI purity is
awesome

13. Stateless React components
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
implicit `shouldComponentUpdate`
is based on shallow equality of
props

14. beware of
very large states
More Redux greatness
great logging
essentially free
thanks to redux-logger
automatic state
persistence
essentially free
thanks to redux-storage
reduce
boilerplate,
discover errors earlier
use a library to
create actions
and reducers
I like redux-act

15. What the hell happened to
encapsulation?!?!?!
Actions, Reducers &
Selectors belong
together according to
functionality!!!
Reducer Selector
Piece of
data
Compose reducers?
Yes! combineReducers
– But how to compose
selectors?!?!
const mapStateToProps = (state) => {
return {
canUndo: state.todos.past.length > 0,
canRedo: state.todos.future.length > 0
}
}

16. Some experiences with React Native

17. React Native is really good
I can confidently say that
I would build again with
React Native.
I could not create
a horizontally
centered grid. :(
Great ecosystem
of components
http://js.coach/react-native
{flex: 1}
There are
gotchas, e.g.
The `require` is
different!?!?!

18. Some experiences with
React Native + Redux

19. Some gotchas
Use advanced
Redux features –
or something like
‘reselect’
time traveling tools did
not work last I checked
Or you might see
what you did not
want to see.
Beware of
global state
on one
component
but more
importantly: on
the navigation
stack
Avoid unnecessary
redrawing

20. How to represent navigation state
in React Native with Redux???
There is nothing like
react-router-redux for
React Native
For my (simple) app, I
sync manually
Some libraries suggest
they will help you, but
they don’t
aksonov/react-native-router-flux