4.0 KiB
4.0 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036150 | Handle an Action in the Store | 6 | false |
Description
reducer
function. Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer
takes state
and action
as arguments, and it always returns a new state
. It is important to see that this is the only role of the reducer. It has no side effects — it never calls an API endpoint and it never has any hidden surprises. The reducer is simply a pure function that takes state and action, then returns new state.
Another key principle in Redux is that state
is read-only. In other words, the reducer
function must always return a new copy of state
and never modify state directly. Redux does not enforce state immutability, however, you are responsible for enforcing it in the code of your reducer functions. You'll practice this in later challenges.
Instructions
reducer
function for you. Fill in the body of the reducer
function so that if it receives an action of type 'LOGIN'
it returns a state object with login
set to true
. Otherwise, it returns the current state
. Note that the current state
and the dispatched action
are passed to the reducer, so you can access the action's type directly with action.type
.
Tests
tests:
- text: Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.
testString: assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.');
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
testString: assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');
- text: Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), 'Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.');
- text: If the action is not of type <code>LOGIN</code>, the store should return the current state.
testString: 'assert((function() { store.dispatch({type: ''__TEST__ACTION__''}); let afterTest = store.getState(); return typeof afterTest === ''object'' && afterTest.hasOwnProperty(''login'') })(), ''If the action is not of type <code>LOGIN</code>, the store should return the current state.'');'
Challenge Seed
const defaultState = {
login: false
};
const reducer = (state = defaultState, action) => {
// change code below this line
// change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
return {
type: 'LOGIN'
}
};
Solution
const defaultState = {
login: false
};
const reducer = (state = defaultState, action) => {
if (action.type === 'LOGIN') {
return {login: true}
}
else {
return state
}
};
const store = Redux.createStore(reducer);
const loginAction = () => {
return {
type: 'LOGIN'
}
};