4.4 KiB
4.4 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036157 | Write a Counter with Redux | 6 | false |
Description
state
immutability, but first, here's a review of everything you've learned so far.
Instructions
incAction
and decAction
action creators, the counterReducer()
, INCREMENT
and DECREMENT
action types, and finally the Redux store
. Once you're finished you should be able to dispatch INCREMENT
or DECREMENT
actions to increment or decrement the state held in the store
. Good luck building your first Redux app!
Tests
tests:
- text: The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>
testString: assert(incAction().type ===INCREMENT, 'The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>');
- text: The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>
testString: assert(decAction().type === DECREMENT, 'The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>');
- text: The Redux store should initialize with a <code>state</code> of 0.
testString: assert(store.getState() === 0, 'The Redux store should initialize with a <code>state</code> of 0.');
- text: Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.
testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), 'Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.');
- text: Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.
testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), 'Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.');
- text: <code>counterReducer</code> should be a function
testString: assert(typeof counterReducer === 'function', '<code>counterReducer</code> should be a function');
Challenge Seed
const INCREMENT = null; // define a constant for increment action types
const DECREMENT = null; // define a constant for decrement action types
const counterReducer = null; // define the counter reducer which will increment or decrement the state based on the action it receives
const incAction = null; // define an action creator for incrementing
const decAction = null; // define an action creator for decrementing
const store = null; // define the Redux store here, passing in your reducers
Solution
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const counterReducer = (state = 0, action) => {
switch(action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
default:
return state;
}
};
const incAction = () => {
return {
type: INCREMENT
}
};
const decAction = () => {
return {
type: DECREMENT
}
};
const store = Redux.createStore(counterReducer);