Состояние редукции не меняется

Я установил хранилище 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;
    }
}

вы получаете состояние по умолчанию, значит получаете lang:''?

McRist 24.08.2018 08:54

@McRist да, верно

AnXD 24.08.2018 08:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
116
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы неправильно обращаетесь к выбранному языку. state.language.selected.

В редукторе вы добавляете свойство lang в состояние, поэтому обращайтесь к нему с тем же именем свойства в mapStateToProps.

const mapStateToProps = state => {
    return {
        language: state.language.lang,
    };
};

но как добавить выбранное значение к свойству lang?

AnXD 24.08.2018 08:59

вы добавили его в редуктор. и использовал его в mapStateToProps как language: state.language.lang, теперь вы можете получить доступ к нему как к реквизитам в компоненте как -> this.props.language

McRist 24.08.2018 09:04

спасибо, но я уже говорил, как передать значение this.state.selected в свойство reducer lang prop

AnXD 24.08.2018 09:08

вы уже передали его в действие, но в редукторе вы всегда возвращаете lang:'en', чтобы вернуть выбранный язык, вы должны были сделать: return {...state, lang: action.lang};

McRist 24.08.2018 09:11

Поменял вот этот const mapStateToProps = state => { return { language: state.language.lang, }; }

AnXD 24.08.2018 09:25
export const changeLanguageEn = (language) => { return { type: CHANGE_LANGUAGE, lang: language, } };
AnXD 24.08.2018 09:26
export default function reducer(state = defaultState, action) { switch (action.type) { case 'CHANGE_LANGUAGE': return {...state, lang: action.lang}; default: return state; } }
AnXD 24.08.2018 09:26

и все же я получаю то же значение по умолчанию

AnXD 24.08.2018 09:26

где вы проверяете, получаете ли вы значение по умолчанию? ... что вы получаете на console.info(state) перед записью return в mapStateToProps function

McRist 24.08.2018 09:35

Я тестирую с помощью журнала консоли и получаю только '', что является состоянием по умолчанию.

AnXD 24.08.2018 09:47

Позвольте нам продолжить обсуждение в чате.

AnXD 24.08.2018 10:05

В вашей функции 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

Другие вопросы по теме