如何使用 React Redux 进行存储和导航？

Question

我是 react-redux 和 react-navigation 的新手。 我正在尝试在 MainScreen 中使用 TextInput 构建一个简单的应用程序，用户键入他的用户名，当他按下“登录”时，该用户名将保存在 redux 商店中，并且导航将自动导航到“HomeScreen”。

App.js：

const initialState = { username: "" };
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "STORE_USERNAME":
      return { username: state.username };
    default:
      return state;
  }
};

const store = createStore(reducer);

MainScreen.jsx：

const mapStateToProps = state => {
  return {
    username: state.username
  };
};
const mapDispatchToProps = dispatch => {
  return {
    storeUsername: () => {
      dispatch({ type: "STORE_USERNAME" });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Main);

我应该更改或添加什么？

Answer 1

首先你需要像这样从 react-navigation 创建一个 appNavigator：

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const AppStack = createStackNavigator({
    HomeScreen: {
      screen: Home,
    },
    Login: {
      screen: Login,
    }});


const navigation = createAppContainer(AppStack);

假设你在 redux 状态下存储用户名是正确的，现在你需要导航它。

所以假设在 Login.js 中

onButtonPress = () => {
this.props.storeUsername();
this.props.navigation.navigate('Home');// here you are redirecting to the main page after username has been stored.
}

render(){

return(
// your other code
<Button onPress={this.onButtonPress} title="submit username">
)

}

const mapStateToProps = state => {
  return {
    username: state.username
  };
};
const mapDispatchToProps = dispatch => {
  return {
    storeUsername: () => {
      dispatch({ type: "STORE_USERNAME" });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);

希望对您有所帮助。如有疑问，请随意