React-navigation导航系统(4)-Redux的整合实例

tags: React-Native

整合实例，其实这完全是Redux的使用，文档里的例子没有写全所以不太好看,github的例子,代码就比较全了.

对Redux的概念理解了这个看起来就简单一点.如果对于Redux的概念不理解,可以看我的几篇翻译文章和前面写的Redux的理解文章.
简书没有目录导航,不是太好看.可以看看我的博客，里面有目录结构.
我理解其中的流程就是,

1. React组件接受props，获取state和dispatch.
2. 组件dispatch action改变navigation的state.
   3.根据state的相应变化加载对应的screen.

/** * @flow */import React from 'react';import {  AppRegistry,  AsyncStorage,  Button,  StyleSheet,  Text,  View,} from 'react-native';import {  NavigationActions,  addNavigationHelpers,  StackNavigator,} from 'react-navigation';import {  Provider,  connect,//redux,connect函数,负责向展示组件注入state和dispatch} from 'react-redux';import {  createStore,  combineReducers,} from 'redux';import {  persistStore,  autoRehydrate,} from 'redux-persist';//redux state持久化的中间件const ProfileScreen = ({ navigation }) => (//这个组件没有dispatch  <View style={styles.container}>    <Text style={styles.welcome}>      Profile Screen    </Text>  </View>);ProfileScreen.navigationOptions = {//配置navigationOptions对象  title: 'Profile',};const LoginScreen = ({ navigation }) => (  <View style={styles.container}>    <Text style={styles.welcome}>      Screen A    </Text>    <Text style={styles.instructions}>      This is great    </Text>    <Button      onPress={() => navigation.dispatch({ type: 'Login' })}      title="Log in"    />  </View>);LoginScreen.navigationOptions = {  title: 'Log In',};//connect 注入state和dispatch//connect注入的组件是动态加载的const LoginStatusMessage = connect(state => ({  isLoggedIn: state.auth.isLoggedIn,}))(({ isLoggedIn, dispatch }) => {//注入组件的动态加载部分  if (!isLoggedIn) {    return <Text>Please log in</Text>;  }  return (    <View>      <Text style={styles.welcome}>        {'You are "logged in" right now'}      </Text>      <Button        onPress={() => dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}        title="Profile"      />    </View>  );});const AuthButton = connect(state => ({  isLoggedIn: state.auth.isLoggedIn,}), dispatch => ({  logout: () => dispatch({ type: 'Logout' }),  login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),}))(({ logout, login, isLoggedIn }) => (  <Button    title={isLoggedIn ? 'Log Out' : 'Log In'}    onPress={isLoggedIn ? logout : login}  />));const MainScreen = () => (  <View style={styles.container}>    <LoginStatusMessage />    <AuthButton />  </View>);MainScreen.navigationOptions = {  title: 'Home Screen',};const AppNavigator = StackNavigator({  Login: { screen: LoginScreen },  Main: { screen: MainScreen },  Profile: { screen: ProfileScreen },});const AppWithNavigationState = connect(state => ({  nav: state.nav,}))(({ dispatch, nav }) => (  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />));const initialNavState = {  index: 1,  routes: [    { key: 'InitA', routeName: 'Main' },    { key: 'InitB', routeName: 'Login' },  ],};const initialAuthState = { isLoggedIn: false };const AppReducer = combineReducers({//路由状态的改变实际逻辑  nav: (state = initialNavState, action) => {    if (action.type === 'Login') {      return AppNavigator.router.getStateForAction(NavigationActions.back(), state);    }    if (action.type === 'Logout') {      return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);    }    return AppNavigator.router.getStateForAction(action, state);  },  auth: (state = initialAuthState, action) => {    if (action.type === 'Login') {      return { ...state, isLoggedIn: true };    }    if (action.type === 'Logout') {      return { ...state, isLoggedIn: false };    }    return state;  },});class ReduxExampleApp extends React.Component {//创建store  store = createStore(AppReducer, undefined, autoRehydrate());  componentDidMount() {//持久化恢复储存的state    persistStore(this.store, { storage: AsyncStorage });  }  render() {    return (      <Provider store={this.store}>        <AppWithNavigationState />      </Provider>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);