javascript - React Native with react-navigation and Redux - 如何实现全局可用的 'Sign Out' 按钮

Question

我已经创建了一个 React Native 应用程序，其导航由 react-navigation 提供，还将 redux 与 react-navigation-redux-helpers 集成，我正在尝试想出一种实现全局可用的“SignOutHeaderButton”组件的好方法，当按下该组件时，将调度 redux 操作并执行导航操作。

目前，我必须从应用程序根组件通过 screenProps 传递一个函数，这是调度 redux 操作的函数。然后这个函数通过 screenProps 传递给 UpdatesListView 容器组件，然后通过 作为 prop 传递给 SignOutHeaderButton 公共(public)组件导航选项。

有没有更好的方法来实现它，这样我就不必将任何 Prop 传递给 SignOutHeaderButton 组件，也不必实例化 signOut() 应用程序中每个容器组件中的函数，从中将有一个“退出”按钮？

App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { reduxifyNavigator } from 'react-navigation-redux-helpers';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider, connect } from 'react-redux';

import { appContainer } from './src/navigators';
import { store, persistor } from './src/store/configureStore';
import { signOut } from './src/actions/auth';

const app = reduxifyNavigator(appContainer, 'root');

const mapStateToProps = state => {
  return {
        state: state.navReducer
  }
}

const AppWithNavigationState = connect(mapStateToProps)(app);

export default class App extends React.Component {

  signOut() {
    store.dispatch(signOut());
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppWithNavigationState
            screenProps={{
              signOut: this.signOut
                }} />
        </PersistGate>
      </Provider>
    )
  }
}

UpdatesListView.js:

import React from 'react';
import { View, Container, Content, Text, Button } from 'native-base';
import { connect } from 'react-redux';

import SignOutHeaderButton from '../components/common/SignOutHeaderButton';

class UpdatesListView extends React.Component {

  constructor(props) {
    super(props);
  }

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Updates',
      headerRight: <SignOutHeaderButton signOut={navigation.getParam('signOut')} />
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({
      signOut: this.props.screenProps.signOut
    })
  }

  render() {
    return (
      <Container>
        <Text>UpdatesListView</Text>
      </Container>
    )
  }
}


const mapStatetoProps = state => {
  return {
        updates: state.updatesReducer,
        tags: state.tagsReducer
  }
}

export default connect(mapStateToProps)(UpdatesListView);

SignOutHeaderButton.js:

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class SignOutHeaderButton extends React.Component {

  constructor(props) {
    super(props);
  }

  signOut() {
    this.props.signOut();
    this.props.navigation.navigate('AuthStack');
  }

  render() {
    return (
      <Button
        title="Sign Out"
        onPress={this.signOut} />
    )
  }
}

export default withNavigation(SignOutHeaderButton);

Answer 1

使用redux connect，redux connect的思想是将store dispatch state绑定(bind)到你的组件this，当您使用 redux connect 时，您可以从应用程序中的任何位置访问任何 redux store dispatch 和 state 这适用于 react 和 react-native，例如 SignOutHeaderButton.js:

import React from 'react';
import { Button } from 'react-native';
import { connect } from 'react-redux';
import { withNavigation } from 'react-navigation';

class SignOutHeaderButton extends React.Component {

  constructor(props) {
    super(props);
  }

  signOut() {
    this.dispatch(signOut());
    this.props.navigation.navigate('AuthStack');
  }

  render() {
    return (
      <Button
        title="Sign Out"
        onPress={this.signOut} />
    )
  }
}

export default connect()(withNavigation(SignOutHeaderButton));

此外，您可以通过将函数传递给 connect(/*your function*/) 来将 redux 存储状态传递给组件，以解析所需的状态数据。为了更好地理解，您可以尝试本教程:https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013

注意 使用嵌套智能组件很常见，redux connect 有一个非常智能的算法来比较存储状态的变化，请查看:https://hackernoon.com/why-using-nested-connect-react-redux-components-is-good-bd17997b53d2