Created
March 14, 2017 15:12
-
-
Save stan229/33fa7cb8d2c31664c176e6e08164f762 to your computer and use it in GitHub Desktop.
React Navigation and Redux example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import { Text } from "react-native"; | |
import { Provider, connect } from "react-redux"; | |
import { StackNavigator, addNavigationHelpers } from "react-navigation"; | |
import Routes from "./config/routes"; | |
import getStore from "./store"; | |
const AppNavigator = StackNavigator(Routes); | |
const navReducer = (state, action) => { | |
const newState = AppNavigator.router.getStateForAction(action, state); | |
return newState || state; | |
}; | |
@connect(state => ({ | |
nav: state.nav | |
})) | |
class AppWithNavigationState extends Component { | |
render() { | |
return ( | |
<AppNavigator | |
navigation={addNavigationHelpers({ | |
dispatch: this.props.dispatch, | |
state: this.props.nav | |
})} | |
/> | |
); | |
} | |
} | |
const store = getStore(navReducer); | |
export default function NCAP() { | |
return ( | |
<Provider store={store}> | |
<AppWithNavigationState /> | |
</Provider> | |
); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineReducers } from "redux"; | |
import otherReducer from "./otherReducer"; | |
export default function getRootReducer(navReducer) { | |
return combineReducers({ | |
nav: navReducer, | |
otherReducer: otherReducer | |
}); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore, applyMiddleware } from "redux"; | |
import thunk from "redux-thunk"; | |
import getRootReducer from "./reducers"; | |
export default function getStore(navReducer) { | |
const store = createStore( | |
getRootReducer(navReducer), | |
undefined, | |
applyMiddleware(thunk) | |
); | |
return store; | |
} |
and syntax error: store.js line 4
your file name is reducer.js but you try to import reducers.js
the worst thing about learning javascript is none of those examples work out of the box
and finally..
can't find variable: Routes
your config/routes file is not even there!
Just wasted another hour debugging stupid examples
There is no route defined for key Index.
Must be one of: 'LoginNav','RegisterNav','DrawerNav'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
syntax error in index.js line 16 @connect(...
Unexpected token (16:0)