freeCodeCamp

4.9 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036159	Use the Spread Operator on Arrays	6	false		Использование оператора спреда на массивах

Description

Одним из решений ES6, чтобы помочь обеспечить неизменность состояния в Redux, является оператор с расширением: ... Оператор распространения имеет множество приложений, один из которых хорошо подходит для предыдущего вызова создания нового массива из существующего массива. Это относительно новый, но обычно используемый синтаксис. Например, если у вас есть массив myArray и напишите: let newArray = [...myArray]; newArray теперь является клоном myArray . Оба массива все еще существуют отдельно в памяти. Если вы выполняете мутацию типа newArray.push(5) , myArray не изменяется. ... эффективно распространяет значения в myArray в новый массив. Чтобы клонировать массив, но добавляя дополнительные значения в новый массив, вы можете написать [...myArray, 'new value'] . Это вернет новый массив, состоящий из значений в myArray и строку 'new value' в качестве последнего значения. Синтаксис распространения может использоваться несколько раз в составе массива, как это, но важно отметить, что он делает только мелкую копию массива. То есть он обеспечивает только неизменные операции массива для одномерных массивов.

Instructions

Используйте оператор spread, чтобы вернуть новую копию состояния при добавлении дела.

Tests

tests:
  - text: 'Магазин Redux должен существовать и инициализироваться с состоянием, равным <code>[Do not mutate state!]</code> .'
    testString: 'assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === "Do not mutate state!"); })(), "The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.");'
  - text: <code>addToDo</code> и <code>immutableReducer</code> должны быть функциями.
    testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.");'
  - text: При <code>ADD_TO_DO</code> действия типа <code>ADD_TO_DO</code> в хранилище Redux следует добавить объект <code>todo</code> и НЕ должен мутировать состояние.
    testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo("__TEST__TO__DO__")); const finalState = store.getState(); const expectedState = [ "Do not mutate state!", "__TEST__TO__DO__" ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), "Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.");'
  - text: Оператор распространения должен использоваться для возврата нового состояния.
    testString: 'getUserInput => assert(getUserInput("index").includes("...state"), "The spread operator should be used to return new state.");'

Challenge Seed

const immutableReducer = (state = ['Do not mutate state!'], action) => {
  switch(action.type) {
    case 'ADD_TO_DO':
      // don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
};

const addToDo = (todo) => {
  return {
    type: 'ADD_TO_DO',
    todo
  }
}

const store = Redux.createStore(immutableReducer);

Solution

// solution required

4.9 KiB Raw Blame History Unescape Escape