Redux возвращает только начальное состояние - PullRequest
Новая
       23

Redux возвращает только начальное состояние

0 голосов
/ 11 февраля 2019

Я хочу создать страницу входа.Когда я вводю значение в textInput (электронная почта или пароль) на эмуляторе, оно постоянно возвращает INITIAL_STATE (пустая строка).И render () в Login.js не выполняет рендеринг при вводе любого ввода.Если я изменяю, например, электронную почту, активируется случай EMAIL_CHANGED в LoginReducer.js, но я не могу изменить состояние.Нет ошибки на консоли отладчика.Как я мог решить эту проблему?

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 };

  }
};

редукторы/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
    });
  };
};

1 Ответ

0 голосов
/ 11 февраля 2019

Ваша проблема в том, что вы не передаете email and password в Thunks.

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