Some experiences building an Android app with React Native & Redux
4 likes1,382 views
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.
Some experiences building an Android app with React Native & Redux
- 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 di鍖erent, 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
- 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 dont aksonov/react-native-router-flux