Question

我正在使用Redux处理React原生应用程序。我是javascript / react langage的新手。

我使用Auth0在app上验证用户身份，我想管理我的“登录”/“退出”按钮。实际上，当我点击“登录”按钮时，字符串更改为“注销”，但我不知道它是如何回到初始状态，在这种情况下，回到“登录”字符串。< / p>

我的authReducer.js

import {
  BUTTON_LOGOUT,
  BUTTON_LOGIN
} from '../actions/types';

const INITIAL_STATE = {
  logButton: 'Log in'
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case BUTTON_LOGOUT:
      return { logButton: 'Log out' };
    case BUTTON_LOGIN:
      return { INITIAL_STATE };
    default:
      return state;
  }
};

我的authActions.js

import { BUTTON_LOGOUT, BUTTON_LOGIN } from './types';

export const logInToLogOut = () => {
    return ({ type: BUTTON_LOGOUT });
}

export const logOutToLogIn = () => {
    return ({ type: BUTTON_LOGIN });
}

我在LoginForm.js中的渲染方法

render = () => {
    return (
      <Card>
        <CardSection>
          <Text style={styles.textStyle}>
            Login page
          </Text>
        </CardSection>
        <CardSection style={styles.buttonSectionStyle}>
          <Button onPress={this.props.logInToLogOut} title={this.props.logButton} />
        </CardSection>
      </Card>
    );
  }

我知道我在“onPress =”中只使用了一个动作但是我已经尝试了很多这样做的事情，这就是为什么我保留代码来处理“登录”到“注销”之间的变化错误。

Answer 1

我猜你可以做一个切换登录操作，在两个状态之间切换，如此

// In the reducer 
case BUTTON_LOGIN_TEXT_TOGGLE: {
      const previousText = state.logButton;
      const newText = previousText == 'Log in' ? 'Log out' : 'Login';
      return { logButton: newText }
}

然后通过onClick函数发送它。

或您可以根据组件this.props.logButton的值，使onClick（onPress？）函数成为不同的函数。

// inside render
const {logButton, logInToLogOut, logOutToLogIn} = this.props;
const onClick = 
   logButton ==  'Login' ? logInToLogOut : logOutToLogIn;

return (
   // other stuff here
   <Button onPress={onClick} title={logButton} />
)

这两个解决方案都使用 the ternary operator ，这对于像这样的事情非常有用（但可以用if / else语句替换）;

Answer 2

我发现了我的问题！我想我昨天不得不写下这种切换方法......

 toggleButtonLabel = () => {
    if (this.props.logButton === 'Log in') {
      this.props.logInToLogOut();
    } else {
      this.props.logOutToLogIn();
    }
  }

React-native Redux - 使用onPress进行两次状态更改

2 个答案: