diff --git a/packages/react-navigation/examples/ReduxExample/App.js b/packages/react-navigation/examples/ReduxExample/App.js index aa381200..647c8686 100644 --- a/packages/react-navigation/examples/ReduxExample/App.js +++ b/packages/react-navigation/examples/ReduxExample/App.js @@ -4,19 +4,15 @@ import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import AppReducer from './src/reducers'; -import AppWithNavigationState from './src/navigators/AppNavigator'; -import { middleware } from './src/utils/redux'; +import { AppNavigator, middleware } from './src/navigators/AppNavigator'; -const store = createStore( - AppReducer, - applyMiddleware(middleware), -); +const store = createStore(AppReducer, applyMiddleware(middleware)); class ReduxExampleApp extends React.Component { render() { return ( - + ); } diff --git a/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png b/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png index 9f56a231..f40ff6b5 100644 Binary files a/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png and b/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png differ diff --git a/packages/react-navigation/examples/ReduxExample/package.json b/packages/react-navigation/examples/ReduxExample/package.json index 7afa6115..c9ac3233 100644 --- a/packages/react-navigation/examples/ReduxExample/package.json +++ b/packages/react-navigation/examples/ReduxExample/package.json @@ -26,7 +26,7 @@ "react": "16.3.1", "react-native": "^0.55.0", "react-navigation": "link:../..", - "react-navigation-redux-helpers": "^1.0.0", + "react-navigation-redux-helpers": "^2.0.0-beta.1", "react-redux": "^5.0.6", "redux": "^3.7.2" }, diff --git a/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js index ceacbd3b..7b68a86f 100644 --- a/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js +++ b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js @@ -2,43 +2,32 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createStackNavigator } from 'react-navigation'; -import { initializeListeners } from 'react-navigation-redux-helpers'; +import { + reduxifyNavigator, + createReactNavigationReduxMiddleware, +} from 'react-navigation-redux-helpers'; import LoginScreen from '../components/LoginScreen'; import MainScreen from '../components/MainScreen'; import ProfileScreen from '../components/ProfileScreen'; -import { navigationPropConstructor } from '../utils/redux'; -export const AppNavigator = createStackNavigator({ +const middleware = createReactNavigationReduxMiddleware( + 'root', + state => state.nav +); + +const RootNavigator = createStackNavigator({ Login: { screen: LoginScreen }, Main: { screen: MainScreen }, Profile: { screen: ProfileScreen }, }); -class AppWithNavigationState extends React.Component { - static propTypes = { - dispatch: PropTypes.func.isRequired, - nav: PropTypes.object.isRequired, - }; - - componentDidMount() { - initializeListeners('root', this.props.nav); - } - - render() { - const { dispatch, nav } = this.props; - this._navigation = navigationPropConstructor( - dispatch, - nav, - AppNavigator.router, - () => this._navigation - ); - return ; - } -} +const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root'); const mapStateToProps = state => ({ - nav: state.nav, + state: state.nav, }); -export default connect(mapStateToProps)(AppWithNavigationState); +const AppNavigator = connect(mapStateToProps)(AppWithNavigationState); + +export { RootNavigator, AppNavigator, middleware }; diff --git a/packages/react-navigation/examples/ReduxExample/src/reducers/index.js b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js index 1ece9bcd..3593b7d3 100644 --- a/packages/react-navigation/examples/ReduxExample/src/reducers/index.js +++ b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js @@ -1,13 +1,13 @@ import { combineReducers } from 'redux'; import { NavigationActions } from 'react-navigation'; -import { AppNavigator } from '../navigators/AppNavigator'; +import { RootNavigator } from '../navigators/AppNavigator'; // Start with two routes: The Main screen, with the Login screen on top. -const firstAction = AppNavigator.router.getActionForPathAndParams('Main'); -const tempNavState = AppNavigator.router.getStateForAction(firstAction); -const secondAction = AppNavigator.router.getActionForPathAndParams('Login'); -const initialNavState = AppNavigator.router.getStateForAction( +const firstAction = RootNavigator.router.getActionForPathAndParams('Main'); +const tempNavState = RootNavigator.router.getStateForAction(firstAction); +const secondAction = RootNavigator.router.getActionForPathAndParams('Login'); +const initialNavState = RootNavigator.router.getStateForAction( secondAction, tempNavState ); @@ -16,19 +16,19 @@ function nav(state = initialNavState, action) { let nextState; switch (action.type) { case 'Login': - nextState = AppNavigator.router.getStateForAction( + nextState = RootNavigator.router.getStateForAction( NavigationActions.back(), state ); break; case 'Logout': - nextState = AppNavigator.router.getStateForAction( + nextState = RootNavigator.router.getStateForAction( NavigationActions.navigate({ routeName: 'Login' }), state ); break; default: - nextState = AppNavigator.router.getStateForAction(action, state); + nextState = RootNavigator.router.getStateForAction(action, state); break; } diff --git a/packages/react-navigation/examples/ReduxExample/src/utils/redux.js b/packages/react-navigation/examples/ReduxExample/src/utils/redux.js deleted file mode 100644 index 23d4ad26..00000000 --- a/packages/react-navigation/examples/ReduxExample/src/utils/redux.js +++ /dev/null @@ -1,12 +0,0 @@ -import { - createReactNavigationReduxMiddleware, - createNavigationPropConstructor, -} from 'react-navigation-redux-helpers'; - -const middleware = createReactNavigationReduxMiddleware( - 'root', - state => state.nav -); -const navigationPropConstructor = createNavigationPropConstructor('root'); - -export { middleware, navigationPropConstructor }; diff --git a/packages/react-navigation/examples/ReduxExample/yarn.lock b/packages/react-navigation/examples/ReduxExample/yarn.lock index 1652a94d..84c46b2e 100644 --- a/packages/react-navigation/examples/ReduxExample/yarn.lock +++ b/packages/react-navigation/examples/ReduxExample/yarn.lock @@ -5728,9 +5728,9 @@ react-navigation-drawer@0.3.0: dependencies: react-native-drawer-layout-polyfill "^1.3.2" -react-navigation-redux-helpers@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-1.1.2.tgz#13013230ac74aa125a5505eefc005db3801f9e07" +react-navigation-redux-helpers@^2.0.0-beta.1: + version "2.0.0-beta.1" + resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.0-beta.1.tgz#7fcbce69418fe9084f2096c7ff4c9f93965126d3" dependencies: invariant "^2.2.2"