redux 状态不会改变

Question

我已经设置了 redux 存储，但是当我尝试使用 mapStateToProps 和 mapDispatchToProps 更改状态时，我总是得到默认状态。所以在 account.js 中，我想获取所选语言，然后将其添加到 redux 商店。我尝试在其他组件中调用它，但我总是以 reducers/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));

actions/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,
    }
};

reducers/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;
    }
}

Answer 1

在您的mapStateToProps 函数中直接尝试state.lang

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

希望这会奏效。

Answer 2

不完全确定我是否理解您的问题，但听起来您正在尝试使用 Account 的内部状态更新 redux 状态？你应该能够做到：

this.props.changeLanguage(this.state.language.selected)

您的组件上也定义了一个方法changeLanguage，也许您可​​以在更改内部状态后在该方法中执行上述行

此外，在Account 类的changeLanguage 方法中，我认为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 操作

Answer 3

您错误地访问了所选语言。 state.language.selected。

在 reducer 中，您正在状态中添加 lang 属性，因此请在 mapStateToProps 中使用相同的属性名称访问它。

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