Redux возвращает новое состояние приложения

Question

Я просматривал эту статью Medium от cloudboost, говоря о редуксе

Здесь, на полпути в статье, они написали что-то вроде этого

И, наконец, что не менее важно, редукторы связывают состояния и действия вместе. Это просто чистая функция с оператором 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
  }
}

[Вопрос] Здесь я не могу понять, как он возвращает новое состояние приложения. Я вижу только то, что он возвращает новый объект, имеющий предыдущее состояние, и что-то, что является статьями по идентификатору Итак, во-первых, кто-то может объяснить, пожалуйста, заявление?

Во-вторых, что они имеют в виду, когда делали это в приведенном выше коде

articlesById: action.articlesById

Учитывая, что это наш магазин с избыточностью (из статьи), т.е. я не вижу action.articlesById нигде в магазине.

Ps: Это наш редукционный магазин из поста в блоге (c нажмите здесь, чтобы просмотреть статью )

{ 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.

Как объясняют документы: «Редукторы - это просто чистые функции, которые принимают предыдущее состояние и действие и возвращают следующее состояние»

Проверьте здесь: Изменения сделаны с чистыми функциями

Редактировать: О вашем 2-м вопросе . Смотрите комментарии для объяснений:

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
  }
}