I am implementing Redux in Expo for the first time and I see some behavior that I do not understand. Can somebody explain if I am doing something wrong.
I have a reducer:
import * as types from "../actions/actionTypes";
export default function languageReducer(state = {}, action) {
switch (action.type) {
case types.SET_LANGUAGE:
const newState = { ...state, language: action.language };
if (__DEV__) {
console.log("languageReducer");
console.log(newState);
}
return newState;
default:
return state;
}
}
and an action:
import * as types from "./actionTypes";
export function setLanguage(language) {
return { type: types.SET_LANGUAGE, language };
}
In my container I have (top part stripped)
...
function mapStateToProps(state) {
if (__DEV__) {
console.log("mapStateToProps");
console.log(state);
}
return { language: state.language };
}
LanguageSwitch.proptypes = {
language: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired
};
export default connect(mapStateToProps)(LanguageSwitch);
I fire this (for example) with
this.props.dispatch(languageActions.setLanguage("fr"));
The console.log in the reducer perfectly shows an object with a property language with a value, however in the mapStateToProps I get a nested object. What am I doing wrong?
Output in the console.
languageReducer
Object {
“language”: “fr”,
}
mapStateToProps
Object {
“language”: Object {
“language”: “fr”,
},
}