3.9 KiB
3.9 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036143 | Extract State Logic to Redux | 6 | false |
Description
state
into Redux. This is the first step to connect the simple React app to Redux. The only functionality your app has is to add new messages from the user to an unordered list. The example is simple in order to demonstrate how React and Redux work together.
Instructions
ADD
. Next, define an action creator addMessage()
which creates the action to add a message. You'll need to pass a message
to this action creator and include the message in the returned action
.
Then create a reducer called messageReducer()
that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer.
Tests
tests:
- text: The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>
testString: assert(ADD === 'ADD', 'The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>');
- text: The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.
testString: assert((function() { const addAction = addMessage('__TEST__MESSAGE__'); return addAction.type === ADD && addAction.message === '__TEST__MESSAGE__'; })(), 'The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.');
- text: <code>messageReducer</code> should be a function.
testString: assert(typeof messageReducer === 'function', '<code>messageReducer</code> should be a function.');
- text: The store should exist and have an initial state set to an empty array.
testString: assert((function() { const initialState = store.getState(); return typeof store === 'object' && initialState.length === 0; })(), 'The store should exist and have an initial state set to an empty array.');
- text: Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.
testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage('__A__TEST__MESSAGE')); const addState = store.getState(); return (isFrozen && addState[0] === '__A__TEST__MESSAGE'); })(), 'Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.');
- text: The <code>messageReducer</code> should return the current state if called with any other actions.
testString: 'assert((function() { const addState = store.getState(); store.dispatch({type: ''FAKE_ACTION''}); const testState = store.getState(); return (addState === testState); })(), ''The <code>messageReducer</code> should return the current state if called with any other actions.'');'
Challenge Seed
// define ADD, addMessage(), messageReducer(), and store here:
Solution
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);