---
id: 5a24c314108439a4d4036159
title: Use the Spread Operator on Arrays
localeTitle: Utilice el operador de propagación en matrices
challengeType: 6
isRequired: false
---
## Description
Una solución de ES6 para ayudar a imponer la inmutabilidad del estado en Redux es el operador de propagación: ... El operador de difusión tiene una variedad de aplicaciones, una de las cuales está bien adaptada al desafío anterior de producir una nueva matriz a partir de una matriz existente. Esta es una sintaxis relativamente nueva, pero comúnmente utilizada. Por ejemplo, si tiene una matriz myArray y escribe:
let newArray = [...myArray];
newArray ahora es un clon de myArray . Ambas matrices todavía existen por separado en la memoria. Si realiza una mutación como newArray.push(5) , myArray no cambia. El ... propaga eficazmente los valores en myArray en una nueva matriz. Para clonar una matriz pero agregar valores adicionales en la nueva matriz, puede escribir [...myArray, 'new value'] . Esto devolvería una nueva matriz compuesta por los valores en myArray y la cadena 'new value' como el último valor. La sintaxis de propagación se puede utilizar varias veces en una composición de matriz como esta, pero es importante tener en cuenta que solo hace una copia superficial de la matriz. Es decir, solo proporciona operaciones de matriz inmutables para matrices unidimensionales.
## Instructions
Utilice el operador de propagación para devolver una nueva copia del estado cuando se agrega una tarea pendiente.
## Tests
```yml
tests:
- text: 'El almacén Redux debería existir e inicializarse con un estado igual a [Do not mutate state!] .'
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 [Do not mutate state!].");'
- text: addToDo y immutableReducer deben ser funciones.
testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "addToDo and immutableReducer both should be functions.");'
- text: El envío de una acción del tipo ADD_TO_DO en el almacén de Redux debe agregar un elemento de ADD_TO_DO todo y NO debe mutar el estado.
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 ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.");'
- text: El operador de propagación se debe utilizar para devolver un nuevo estado.
testString: 'getUserInput => assert(getUserInput("index").includes("...state"), "The spread operator should be used to return new state.");'
```
## Challenge Seed
```jsx
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
```js
const immutableReducer = (state = ['Do not mutate state!'], action) => {
switch(action.type) {
case 'ADD_TO_DO':
return [
...state,
action.todo
];
default:
return state;
}
};
const addToDo = (todo) => {
return {
type: 'ADD_TO_DO',
todo
}
}
const store = Redux.createStore(immutableReducer);
```