Реагируйте на Native Redux.Состояние обновляется, но компонент не перерисовывается

Question

Я работаю над приложением с редуксом.

В следующем фрагменте я переключаю состояние appEnabled:

...
render() {
    const { appEnabled } = this.props;
    const { updatePreferences } = this.props;

    return (
        <View style={styles.preferences}>
                <Text>App enabled: {appEnabled + ''}</Text>
                <Button onPress={() => updatePreferences({ appEnabled: !appEnabled })}>Toggle AppEnabled</Button>
        </View>)
}

Вот функции отображения:

function mapStateToProps({ preferences }) {
    return {
        appEnabled: preferences.appEnabled,
    };
}

function mapDispatchProps(dispatch) {
    return {
        getPreferences,
        updatePreferences: (preferences) => dispatch(updatePreferencesAction(preferences))
    };
}

export default connect(mapStateToProps, mapDispatchProps)(PreferenceScreen);

Обновление состояния работает нормально. И все же повторная визуализация компонента не происходит.

Я знаю, что частой причиной может быть случайная мутация состояния. Я убедился, что функция редуктора каждый раз возвращает новый объект:

export default function preferenceReducer(state = { ...defaultState }, action = {}) {
    // console.log("reduces is called")
    switch (action.type) {
        case UPDATE_PREFERENCES :
            return { ...state, ...action.preferences };
        default:
            return state;
    }
}

// Action creators
export function updatePreferencesAction(preferences) {
    return { type: UPDATE_PREFERENCES, preferences };
}

В чем может быть причина того, что компонент не отображается в моем случае?

Answer 1

Изменить

function mapStateToProps({ preferences }) {
return {
    appEnabled: preferences.appEnabled,
};

}

К

function mapStateToProps({ appEnabled }) {
return {
    appEnabled: appEnabled,
};

Answer 2

Трудно сказать, не видя полного кода, если вы добавляете jsfiddle, это легче помочь.

В любом случае, ваш компонент выглядит нормально, и он должен обновляться при смене реквизита.То, как вы обновляете свое состояние в своем редукторе, - единственное, что кажется немного странным.Я не могу определить форму вашего состояния, просто посмотрев на ваш редуктор, но, например, почему вы делаете state = {...defaultState} вместо state = defaultState?

return {...state, ...action.preferences } тоже сомнительно.В большинстве случаев состояние обновляется следующим образом: return { ...state, preferences: action.preferences }, поскольку оно делает изменения, которые делает ваш редуктор, более ясными.

Я бы порекомендовал вам внести эти изменения, а затем тщательно отладить с помощью redux devtools.