Я установил хранилище redux, но когда я пытаюсь внести изменения в состояние с помощью mapStateToProps и mapDispatchToProps, я всегда получаю состояние по умолчанию. Итак, в account.js я хочу получить выбранный язык, а затем добавить его в магазин redux. Я пытаюсь вызвать его в других компонентах, но всегда получаю redurs / Language.js defaultState. Что я делаю не так?
Account.js
class Account extends React.Component {
static navigationOptions = ({ navigation }) => {};
constructor(props) {
super(props);
this.state = {
language: {
sq: true,
en: false,
selected: '',
},
};
}
changeLanguage = (selected) => {
if (this.state.sq) {
this.setState({ selected: 'sq' });
} else {
this.setState({ selected: 'en' });
}
};
render() {
const navigation = this.props.navigation;
return (
<ScrollView>
<View>
<ThemeProvider>
<TableView header = {I18n.t('account.lang_label')}>
<CheckboxRow
selected = {this.state.language.sq}
onPress = {() => {
this.setState(state => ({
language: {
sq: !state.language.sq,
en: !state.language.en,
},
}));
this.changeLanguage();
}}
title = {I18n.t('account.albanian')}
/>
<CheckboxRow
selected = {this.state.language.en}
onPress = {() =>
this.setState(state => ({
language: {
en: !state.language.en,
sq: !state.language.sq,
},
}))
}
title = {I18n.t('account.english')}
/>
</TableView>
</ThemeProvider>
</View>
</ScrollView>
);
}
}
const mapDispatchToProps = dispatch => {
return {
changeLanguage: (selected) => { dispatch(changeLanguageEn(selected))},
};
};
const mapStateToProps = state => {
return {
language: state.language.selected,
};
};
export default withNavigation(connect(
mapStateToProps,
mapDispatchToProps
)(Account));
действия / Language.js
import {CHANGE_LANGUAGE_EN, CHANGE_LANGUAGE_AL} from "./types";
export const changeLanguageEn = (language) => {
return {
type: CHANGE_LANGUAGE_EN,
lang: language,
}
};
export const changeLanguageAl = (language) => {
return {
type: CHANGE_LANGUAGE_AL,
lang: language,
}
};
редукторы / Language.js
const defaultState = {
lang: '',
};
export default function reducer(state = defaultState, action) {
switch (action.type) {
case 'CHANGE_LANGUAGE_EN':
return {...state, lang: 'en'};
case 'CHANGE_LANGUAGE_AL':
return Object.assign({}, state, {
lang: 'sq',
});
default:
return state;
}
}
@McRist да, верно



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы неправильно обращаетесь к выбранному языку. state.language.selected.
В редукторе вы добавляете свойство lang в состояние, поэтому обращайтесь к нему с тем же именем свойства в mapStateToProps.
const mapStateToProps = state => {
return {
language: state.language.lang,
};
};
но как добавить выбранное значение к свойству lang?
вы добавили его в редуктор. и использовал его в mapStateToProps как language: state.language.lang, теперь вы можете получить доступ к нему как к реквизитам в компоненте как -> this.props.language
спасибо, но я уже говорил, как передать значение this.state.selected в свойство reducer lang prop
вы уже передали его в действие, но в редукторе вы всегда возвращаете lang:'en', чтобы вернуть выбранный язык, вы должны были сделать: return {...state, lang: action.lang};
Поменял вот этот const mapStateToProps = state => { return { language: state.language.lang, }; }
export const changeLanguageEn = (language) => { return { type: CHANGE_LANGUAGE, lang: language, } };export default function reducer(state = defaultState, action) { switch (action.type) { case 'CHANGE_LANGUAGE': return {...state, lang: action.lang}; default: return state; } }и все же я получаю то же значение по умолчанию
где вы проверяете, получаете ли вы значение по умолчанию? ... что вы получаете на console.info(state) перед записью return в mapStateToProps function
Я тестирую с помощью журнала консоли и получаю только '', что является состоянием по умолчанию.
Позвольте нам продолжить обсуждение в чате.
В вашей функции mapStateToProps попробуйте напрямую с state.lang
const mapStateToProps = state => {
return {
language: state.lang,
};
};
Надеюсь, это сработает.
Не совсем уверен, что понимаю ваш вопрос, но похоже, что вы пытаетесь обновить состояние редукции с помощью внутреннего состояния Account? Вы должны уметь:
this.props.changeLanguage(this.state.language.selected)
У вас есть метод для вашего компонента, определенный changeLanguage, возможно, вы могли бы выполнить строку выше в этом методе после изменения внутреннего состояния
кроме того, в вашем методе changeLanguage в вашем классе Account я не думаю, что this.state.sq существует, поскольку sq является ключом в объекте состояния language. Вместо этого должен быть this.state.language.sq. Вам также не нужно добавлять выбранный аргумент в этот метод. Попробуйте сделать так, чтобы ваш метод changeLanguage выглядел так
changeLanguage = () => {
if (this.state.sq) {
this.setState({ language.selected: 'sq' });
} else {
this.setState({ language.selected: 'en' });
}
// dispatch your action here after updating the state
this.props.changeLanguage(this.state.language.selected)
};
Теперь вызов this.changeLanguage(); обновит ваше внутреннее состояние, а затем отправит ваше действие changeLanguage redux
вы получаете состояние по умолчанию, значит получаете
lang:''?