4.3 KiB
4.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036158 | Never Mutate State | 6 | false | Nunca Mute Estado |
Description
state 1
, state 2
, state 3
, state 4
, ...
e assim por diante, onde cada estado pode ser semelhante ao último, mas cada é um dado distinto. Essa imutabilidade, na verdade, é o que fornece recursos como depuração de viagem no tempo que você pode ter ouvido falar. O Redux não aplica ativamente a imutabilidade do estado em suas lojas ou redutores, essa responsabilidade recai sobre o programador. Felizmente, o JavaScript (especialmente o ES6) fornece várias ferramentas úteis que você pode usar para impor a imutabilidade do seu estado, seja uma string
, um number
, uma array
ou um object
. Observe que strings e números são valores primitivos e são imutáveis por natureza. Em outras palavras, 3 é sempre 3. Você não pode alterar o valor do número 3. Uma array
ou object
, no entanto, é mutável. Na prática, seu estado provavelmente consistirá em uma array
ou object
, pois essas são estruturas de dados úteis para representar muitos tipos de informações. Instructions
store
e reducer
no editor de código para gerenciar itens de tarefas. Termine de escrever o caso ADD_TO_DO
no redutor para acrescentar uma nova ADD_TO_DO
ao estado. Existem algumas maneiras de conseguir isso com JavaScript padrão ou ES6. Veja se você pode encontrar uma maneira de retornar um novo array com o item de action.todo
anexado ao final. Tests
tests:
- text: O repositório do Redux deve existir e inicializar com um estado igual ao array <code>todos</code> no 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> e <code>immutableReducer</code> ambos devem ser funções.
testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.");'
- text: Despachar uma ação do tipo <code>ADD_TO_DO</code> no repositório Redux deve adicionar um item <code>todo</code> e NÃO deve sofrer mutação.
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