Redux 仅返回初始状态

Question

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

主.js

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

登录.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);

登录缩减器.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 };
  }
};

减速器/索引器.js

import { combineReducers } from 'redux';
import LoginReducer from './LoginReducer';
export default combineReducers({
 auth: LoginReducer
});

类型.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';

登录操作.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

你的问题是你没有把email and password传递给笨蛋。

const mapDispatchToProps = (dispatch) => {
  return {
    emailChanged: (email) => {
      dispatch(emailChanged(email))
    },
    passwordChanged: (password) => {
      dispatch(passwordChanged(password))
    },
    loginWithEmail: () => {
      // TODO: complete this yourself, as you did not provide what it is in your code.
    },
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);