Object.assign an concat - рефакторинг ES6

Как я могу реорганизовать этот код редуктора с помощью ES6? Concat я могу заменить на ..., верно? А как насчет Object.assign?

import { FETCH_REQUEST, FETCH_SUCCESS, FETCH_FAILURE } from '../actions';

const initialState = {
  isFetching: false,
  beersArray: [],
  errorMessage: '',
  skip: 0,
  limit: 0,
  hasMore: true,
};

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
        skip: action.skip,
        limit: action.limit,
        hasMore: true,
      });
    case FETCH_SUCCESS:
      return Object.assign({}, state, {
        isFetching: false,
        beersArray: state.beersArray.concat(action.beers),
        hasMore: action.hasMore,
      });
    case FETCH_FAILURE:
      return Object.assign({}, state, {
        isFetching: false,
        errorMessage: action.errorMessage,
        hasMore: false,
      });
    default:
      return state;
  }
}

javascript reactjs ecmascript-6 redux react-redux

16.03.2018 19:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

726

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете заменить Object.assign на. Имейте в виду, что ...state (свойства распространения) являются предложением, поэтому ваша среда должна их поддерживать.

return { ...state, isFetching: true, skip: action.skip, limit: action.limit, hasMore: true };

Насчет concat можно написать

{ beersArray: [...state.beersArray, ...action.beers] }

Это просто уничтожит элементы из state.beersArray и action.beers, поместит их в новый массив и назначит beersArray.

16.03.2018 19:03

Вы можете использовать оператор Spread для объектов key-value и arrays.

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_REQUEST:
      return {...state, { isFetching: true, skip: action.skip, limit: action.limit, hasMore: true}};
    case FETCH_SUCCESS:
      return {...state, { isFetching: false, beersArray: [...state.beersArray, ...action.beers], hasMore: action.hasMore });
    case FETCH_FAILURE:
      return { ...state, { isFetching: false, errorMessage: action.errorMessage, hasMore: false });
    default:
      return state;
  }
}

Переходы

state.beersArray.concat(action.beers) в [...state.beersArray, ...action.beers]

Object.assign({}, state, {other props}} в { ...state, ...state, ...{other props} }

`Spread syntax (...)`

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

16.03.2018 19:06