избыточное состояние упаковывается в другой объект - PullRequest
Новая
       6

избыточное состояние упаковывается в другой объект

0 голосов
/ 14 ноября 2018

Я пытаюсь создать пример приложения, используя React Native & Redux.Что я не могу понять, так это то, почему мой объект состояния помещается в другой объект.

У меня начальное состояние как {email: 'test'} ,Я должен получить доступ к электронной почте как this.props.email.email Почему я должен делать this.props.email.email вместо this.props.email

Любая помощь будет оценена.

Welcome.js 

class Welcome extends Component {
  render() {  
    return (
      <View style={ styles.container }>
        <View style = { styles.inputContainer }>
          <Text>{JSON.stringify(this.props.email)}</Text>
          <Button title = 'Update Email' 
              style = { styles.placeButton }
              onPress={() => this.props.onChangeEmail('hello')}
          />
          </View>
      </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    email: state.email
  }
}
const mapDispatchToProps = dispatch => {
  return {
    onChangeEmail: (email) => { dispatch({type: 'CHANGE_EMAIL_INPUT', email: email}) }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Welcome)

EmailReducer.js 

const initialState = {
  email: 'test',
};

const emailReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'CHANGE_EMAIL_INPUT':
     return Object.assign({}, state,  
                { email: action.email }
            );
    default:
      return state;
  }
}

export default emailReducer;

Store.js 

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

const rootReducer = combineReducers({
  email: emailReducer
});

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

export default configureStore;

1 Ответ

0 голосов
/ 14 ноября 2018

Когда вы вызываете combReducers, вы создаете магазин со следующей формой 

{
  email: {
    email: 'test'
  }
}

То есть ключи в объекте, передаваемом в CombineReducers, являются корневыми ключами объекта состояния. Начальное состояние для редуктора электронной почты вставляется в ключ «email» объекта состояния.

Это причина, по которой вам нужно написать this.props.email.email: первый - это ключ в корневом объекте состояния (который выводится из combReducers), второй - это опора части состояния, управляемой emailReducer

...