curriculum/challenges/english/blocks/redux/5a24c314108439a4d403615a.md
Time to practice removing items from an array. The spread operator can be used here as well. Other useful JavaScript methods include slice() and concat().
The reducer and action creator were modified to remove an item from an array based on the index of the item. Finish writing the reducer so a new state array is returned with the item at the specific index removed.
The Redux store should exist and initialize with a state equal to [0,1,2,3,4,5]
const initialState = store.getState();
assert.isArray(initialState)
assert.deepEqual(initialState, [0, 1, 2, 3, 4, 5])
removeItem and immutableReducer both should be functions.
assert(
typeof removeItem === 'function' && typeof immutableReducer === 'function'
);
Dispatching the removeItem action creator should remove items from the state and should NOT mutate state.
const initialState = store.getState();
const isFrozen = !!DeepFreeze(initialState);
store.dispatch(removeItem(3));
const state_1 = store.getState();
store.dispatch(removeItem(2));
const state_2 = store.getState();
store.dispatch(removeItem(0));
store.dispatch(removeItem(0));
store.dispatch(removeItem(0));
const state_3 = store.getState();
assert(isFrozen)
assert.deepEqual(state_1, [0, 1, 2, 4, 5])
assert.deepEqual(state_2, [0, 1, 4, 5])
assert.deepEqual(state_3, [5])
const immutableReducer = (state = [0,1,2,3,4,5], action) => {
switch(action.type) {
case 'REMOVE_ITEM':
// Don't mutate state here or the tests will fail
return
default:
return state;
}
};
const removeItem = (index) => {
return {
type: 'REMOVE_ITEM',
index
}
}
const store = Redux.createStore(immutableReducer);
const immutableReducer = (state = [0,1,2,3,4,5], action) => {
switch(action.type) {
case 'REMOVE_ITEM':
return [
...state.slice(0, action.index),
...state.slice(action.index + 1)
];
default:
return state;
}
};
const removeItem = (index) => {
return {
type: 'REMOVE_ITEM',
index
}
}
const store = Redux.createStore(immutableReducer);