4.4 KiB
4.4 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036158 | Never Mutate State | 6 | false | Nunca mutar estado |
Description
state 1
, el state 2
, el state 3
, el state 4
, ...
y así sucesivamente, donde cada estado puede ser similar al último, pero cada uno Es un dato distinto. Esta inmutabilidad, de hecho, es lo que proporciona características tales como la depuración de viajes en el tiempo que puede haber escuchado. Redux no hace cumplir activamente la inmutabilidad del estado en su tienda o reductores, esa responsabilidad recae en el programador. Afortunadamente, JavaScript (especialmente ES6) proporciona varias herramientas útiles que puede utilizar para imponer la inmutabilidad de su estado, ya sea una string
, un number
, una array
u un object
. Tenga en cuenta que las cadenas y los números son valores primitivos y son inmutables por naturaleza. En otras palabras, 3 siempre es 3. No puede cambiar el valor del número 3. Sin embargo, una array
u object
es mutable. En la práctica, su estado probablemente consistirá en una array
u object
, ya que son estructuras de datos útiles para representar muchos tipos de información. Instructions
store
y un reducer
en el editor de código para administrar los elementos de tareas pendientes. Termine de escribir el caso ADD_TO_DO
en el reductor para agregar una nueva ADD_TO_DO
al estado. Hay algunas maneras de lograr esto con JavaScript estándar o ES6. Vea si puede encontrar una manera de devolver una nueva matriz con el elemento de action.todo
adjunto al final. Tests
tests:
- text: El almacén de Redux debería existir e inicializarse con un estado igual a la matriz de <code>todos</code> en el editor de código.
testString: 'assert((function() { const todos = [ "Go to the store", "Clean the house", "Cook dinner", "Learn to code" ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(",") === todos.join(","); })(), "The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.");'
- text: <code>addToDo</code> y <code>immutableReducer</code> deben ser funciones.
testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.");'
- text: El envío de una acción del tipo <code>ADD_TO_DO</code> en el almacén de Redux debe agregar un elemento de <code>ADD_TO_DO</code> <code>todo</code> 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 = [ "Go to the store", "Clean the house", "Cook dinner", "Learn to code", "__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.");'
Challenge Seed
const ADD_TO_DO = 'ADD_TO_DO';
// A list of strings representing tasks to do:
const todos = [
'Go to the store',
'Clean the house',
'Cook dinner',
'Learn to code',
];
const immutableReducer = (state = todos, action) => {
switch(action.type) {
case ADD_TO_DO:
// don't mutate state here or the tests will fail
return
default:
return state;
}
};
// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
return {
type: ADD_TO_DO,
todo
}
}
const store = Redux.createStore(immutableReducer);
Solution
// solution required