Редукс редуктор не может обновить состояние редукса / реквизиты - PullRequest
Новая
       52

Редукс редуктор не может обновить состояние редукса / реквизиты

1 голос
/ 06 июля 2019

Я изо всех сил пытаюсь обновить реквизит / состояние из Redx с TextInput (ReactNative). Я могу получить действия и исходное состояние от редукса до компонента SignIn, однако я не могу обновить реквизиты электронной почты (входное значение). Я искал решение, но не могу найти решение, которое решает мою проблему.

SignInScreen компонент получает действия в подпорках, и я могу получить доступ к AuthReducer из компонента, поэтому я думаю, что структура Redux в порядке. Только в AuthReducer.js return {... state, email: action.payload} не обновляет реквизиты.

Ниже приведен мой код. Я опубликовал важные части, но я добавлю больше, если нужно.

AuthReducer.js 

// I can access this reducer
// INITIAL_STATE will be shown TextInput components

import {EMAIL_CHANGED } from '../actions/actionTypes';
import { AlertIOS } from 'react-native';

const INITIAL_STATE = { email: 'this is shown' }

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:

      // This alert function works with inputted payload(email)
      AlertIOS.alert('Input', action.payload);

      // This return doesn't update props.email in SignInScreen Component
      return { ...state, email: action.payload };

    default:
      return state;
  }
}

configureStore.js 

import AuthReducer from './reducers/AuthReducer';
import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({
    auth: AuthReducer
});

const configureStore = () => {
    return createStore(rootReducer);
};

export default configureStore;

SignInScreen.js 

import { connect } from 'react-redux';
import { emailChanged } from '../../store/actions';
import etc...

onEmailChange = (text) => {
  this.props.emailChanged(text);
};

render() {
  return (
    <View>
      <View>
        <Text>Email:</Text>
        <TextInput
          placeholder="email@mail.com"
          autoCorrect={false}
          value={this.props.email}
          onChangeText={email => this.onEmailChange(email)}
        />
      </View>
    </View>
  );
}

const mapStateToProps = state => {
  return {
    email: state.auth.email
  };
};

export default connect(mapStateToProps, { emailChanged })(SignInScreen);

App.js 

import etc...

  render() {
    return (
      <Provider store={store}>
        <AppNavigator 
          style={styles.container} //Stephen Girder course said this was good practice
                                //to ensure fills screen with flex: 1 
        />
      </Provider>
    );
  }

const store = configureStore();

export default App;

package.json 

"expo": "^32.0.0",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-dom": "^16.8.6",
"react-navigation": "^3.10.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",

enter image description here

1 Ответ

1 голос
/ 06 июля 2019

Вы забыли отправить действие.Попробуйте использовать следующее в SignInScreen.js : 

const mapStateToProps = state => {
  return {
    email: state.auth.email
  };
};

const mapDispatchToProps = dispatch => {
  return {
      emailChanged: value => dispatch(emailChanged(value))
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(SignInScreen);
...