Question

浏览这篇有关Medium的文章

在本文中途，他们写了这样的文字

最后但并非最不重要的一点是，化简器将状态和动作联系在一起。它只是一个带有switch语句的纯函数，用于检查动作类型并返回应用的新状态。在我们的文章示例中，减速器看起来像这样：

在这里，请注意以下语句：返回应用的新状态

为了说明这一点，他们展示/编写了此示例

const initialState = {
  articlesById: null,
}
export default function(state = initialState, action) {
  switch (action.type) {
    case types.ARTICLES_FETCHED:
      return {
        ...state,
        articlesById: action.articlesById
      }
    default:
      return initialState
  }
}

[问题] ，在这里，我无法弄清楚它如何返回应用程序的新状态。我所能看到的是，它返回的是具有先前状态的新对象，并且是按ID的商品。首先，有人可以解释一下这个声明吗？

第二，当他们在上面的代码中执行此操作时，它们是什么意思

articlesById: action.articlesById

考虑将其作为我们的redux存储区（摘自本文），即在redux存储区的任何地方都看不到action.articlesById。

Ps：这是我们来自博客文章（c lick here to go through the article）的redux商店

{ type: 'ARTICLES_FETCHED', 
  payload: [{
      "id": 314,
      "title": "6 innovative apps utilizing the ethereum network",
      "source": "Investopedia‎",
      "link": "http://www.investopedia.com/news/6-innovative...",
      "date": "1500523200",
      "type": "msm"
    },
    {
      "id": 893,
      "title": "what is plasma and how will it strengthen...",
      "source": "Investopedia‎",
      "link": "http://www.investopedia.com/news/what-plasma-and...",
      "date": "1502856000",
      "type": "msm"
    },..] 
}

Answer 1

[问题]在这里，我无法弄清楚它如何返回应用程序的新状态。我所能看到的是它正在返回具有先前状态的新对象 t，并且它是按ID的文章。首先，有人可以解释一下这个声明吗？

[答案] ，您将返回一个新的对象。这意味着您不直接操纵状态（不改变状态），而是返回一个新的状态（对象）。这是函数式编程的概念，称为纯函数，是Redux的关键概念之一。

正如文档所解释的：“ Reducer只是采取上一个状态和一个动作，然后返回下一个状态的纯函数”

在这里检查：Changes are made with pure functions

编辑：关于您的第二个问题。请参阅注释以获取解释：

const initialState = {
  articlesById: null,
}

export default function(state = initialState, action) {
  switch (action.type) {
    // If the action type is ARTICLES_FETCHED, you return a new state
    case types.ARTICLES_FETCHED: 
      // You are returning a new object created wit literal syntax `{}`
      return {
        ...state, // You are using the spread operator `...` to get all the properties of `state`
        articlesById: action.articlesById // You are setting the property `articlesById` of the new object to the property `articlesById` of your action (if defined)
      }
    default: // If the action type is not ARTICLES_FETCHED, then you return the initial state without any change
      return state; // I've made a change here, you can just return `state`, because your state has the default value of initialState
  }
}

redux返回App的新状态

1 个答案: