Question

我正在尝试使用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;

Answer 1

当您调用CombineReducers时，您正在创建具有以下形状的商店

{
  email: {
    email: 'test'
  }
}

也就是说，传递给CombineReducers的对象中的键是状态对象的根键。电子邮件缩减程序的初始状态被插入到状态对象的键“电子邮件”中。

这是您需要编写this.props.email.email的原因：前者是根状态对象（从CombineReducers推导）中的键，后者是由emailReducer管理的状态部分的道具。 / p>

redux状态被包裹在另一个对象中

1 个答案: