Skip to content

Instantly share code, notes, and snippets.

@danielweinmann
Created February 8, 2016 19:33
Show Gist options
  • Save danielweinmann/09a2c980fe2fa405eb39 to your computer and use it in GitHub Desktop.
Save danielweinmann/09a2c980fe2fa405eb39 to your computer and use it in GitHub Desktop.
Router not passing props to Routes on consecutive renders
import React, { AppRegistry, Component, View, Text } from 'react-native'
import { Provider, connect } from 'react-redux'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import { Router, Route } from 'react-native-router-flux'
// ACTIONS
const fetchTodos = () => {
return dispatch => {
dispatch({ type: 'LIST_REQUEST' })
setTimeout(() => {
dispatch({ type: 'LIST_SUCCESS', list: "Here should come the list" })
}, 1000)
}
}
// REDUCERS
const todo = (state = { listing: false, list: null }, action) => {
switch (action.type) {
case 'LIST_REQUEST':
return { ...state, listing: true, list: null }
case 'LIST_SUCCESS':
return { ...state, listing: false, list: action.list }
default:
return state
}
}
// PRESENTATIONAL COMPONENTS
class ListThree extends Component {
componentWillReceiveProps(nextProps) {
console.log('ListThree willReceiveProps', nextProps)
}
render() {
console.log('ListThree render', this.props)
const { onLoad, todo: { list, listing } } = this.props
return(
<Text onPress={onLoad}>{ list ? list : ( listing ? 'Listing...' : 'Click to load the list' ) }</Text>
)
}
}
class ListTwo extends Component {
componentWillReceiveProps(nextProps) {
console.log('ListTwo willReceiveProps', nextProps)
}
render() {
console.log('ListTwo render', this.props)
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ListThree {...this.props} />
</View>
)
}
}
// When List uses Router and Route, it does not re-render
class List extends Component {
componentWillReceiveProps(nextProps) {
console.log('List willReceiveProps', nextProps)
}
render() {
console.log('List render', this.props)
return(
<Router {...this.props}>
<Route {...this.props} name="listTwo" component={ListTwo} initial={true} />
</Router>
)
}
}
// CONTAINERS
class TodoList extends Component {
handleLoad() {
this.props.dispatch(fetchTodos())
}
render() {
return (<List {...this.props} onLoad={this.handleLoad.bind(this)} />)
}
}
TodoList = connect(state => ({
todo: state.todo,
}))(TodoList)
const store = applyMiddleware(thunkMiddleware, createLogger())(createStore)(combineReducers({ todo }))
export default TestRedux = () => (
<Provider store={store}>
<TodoList />
</Provider>
)
AppRegistry.registerComponent('TestRedux', () => TestRedux)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment