为什么 redux 状态会改变另一个状态？答案

【问题标题】：Why redux state changing another state?为什么 redux 状态会改变另一个状态？
【发布时间】：2017-12-24 13:17:51
【问题描述】：

谁能解释为什么在我更改另一个状态（例如语言）时，为什么在 redux 存储文章（数组）中状态会破坏这是关于它的2个屏幕截图。 first screenshot

动作/语言

    import { SWITCH_LANG } from '../types';

// switch Language
export const setlocale = (lang) => (dispatch) => {
    localStorage.devsLang = lang;
    dispatch(setLocaleDispatch(lang))
}

export const setLocaleDispatch = (lang) => ({
    type: SWITCH_LANG,
    lang
})

reducer/语言

import { SWITCH_LANG } from '../types';

export default function locale(state = { lang: "en" }, action = {}) {
    switch(action.type) {
        case SWITCH_LANG:
            return { lang: action.lang }
        default:
            return state;
    }
}

one more screenshot from redux-logger

【问题讨论】：

请添加最少的代码。这不会让你得到答案

标签： reactjs redux

【解决方案1】：

你覆盖你的状态。您需要复制现有状态并添加新值。使用Object.assign 或spread operator 如下：

Object.assign({}, state, { lang: action.lang } )

更多信息here

【讨论】：

哪一个？文章缩减器？
是的，文章缩减器。

【解决方案2】：

reducer/文章

import { createSelector } from 'reselect';
import { ADD_NEW_ARTICLE, GET_ALL_ARTICLES, GET_ONE_ARTICLE } from '../types';

export default function article(state = {}, action = {}) {
    switch(action.type) {
        case ADD_NEW_ARTICLE:
            return action.article
        case GET_ALL_ARTICLES:
            return action.articles
        case GET_ONE_ARTICLE:
            return action.oneArticle
        default:
            return {};
    }
}

export const articlesHashSelector = state => state.article;

export const articlesSelector = createSelector(
    articlesHashSelector,
    hash => Object.values(hash)
);

【讨论】：

【解决方案3】：

来自 redux-logger 截图

我知道你返回了一个 Array 文章，检查 GET_ALL_ARTICLES 操作的负载

case GET_ALL_ARTICLES: 
   return action.articles

所以基本上你正在改变文章状态。从对象到数组

【讨论】：