Question

我想创建一个登录页面。当我在模拟器上为textInput（电子邮件或密码）输入值时，它会不断返回INITIAL_STATE（空字符串）。当我输入任何输入时，Login.js中的render（）不会重新呈现。如果我更改了电子邮件实例，则LoginReducer.js中的EMAIL_CHANGED案例已激活，但无法更改状态。在调试器控制台上没有错误。我该如何解决这个问题？

Main.js

  render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
  <Provider store={store}>
    <Login />
  </Provider>
);}}

Login.js

render(){
const {containerStyle, subContainerStyle, inputStyle} = styles;
return(
  <View style={containerStyle}>
    <View style={subContainerStyle}>
    <TextInput
      placeholder="E-mail"
      style={inputStyle}
      value={this.props.email}
      onChangeText={email => this.props.emailChanged(email)}
    />
    </View>

    <View style={subContainerStyle}>
    <TextInput
      secureTextEntry
      placeholder="Password"
      style={inputStyle}
      value={this.props.password}
      onChangeText={password => this.props.passwordChanged(password)}
    />
    </View>

    <View style={subContainerStyle}>
      {this.renderLoginButton()}
    </View>
  </View>
);}}
const mapStateToProps = state => {
 return {
  email: state.auth.email,
  password: state.auth.password,
  loading: state.auth.loading
};
};

export default connect(mapStateToProps, { emailChanged, passwordChanged,loginWithEmail })(Login);

LoginReducer.js

import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL } from '../actions/types';

const INITIAL_STATE = {
  email: '',
  password: '',
  loading: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
        console.log(state.email);
        return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true };
    case LOGIN_USER_SUCCESS:
      return { ...state, loading: false };
    case LOGIN_USER_FAIL:
      return { ...state, loading: false };
    default:
      return { ...state };

  }
};

reducers / index.js

import { combineReducers } from 'redux';
import LoginReducer from './LoginReducer';

export default combineReducers({
 auth: LoginReducer
});

types.js

export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';

export const LOGIN_USER = 'login_user';
export const LOGIN_USER_SUCCESS = 'login_user_succes';
export const LOGIN_USER_FAIL = 'login_user_fail';

loginActions.js

import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL } from './types';

export const emailChanged = (email) => {
    return (dispatch) => {
    dispatch({
      type: EMAIL_CHANGED,
      payload: email
    });
  };
};

export const passwordChanged = (password) => {
    return (dispatch) => {
    dispatch({
      type: PASSWORD_CHANGED,
      payload: password
    });
  };
};

Answer 1

您的问题是您没有将1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 + 256 = 512传递给流氓。

email and password

Redux仅返回初始状态

1 个答案: