5.7 KiB
5.7 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036154 | Combine Multiple Reducers | 6 | false | Combine vários redutores |
Description
createStore()
do Redux. Para nos permitir combinar vários redutores juntos, o Redux fornece o método combineReducers()
. Esse método aceita um objeto como um argumento no qual você define propriedades que associam chaves a funções específicas do redutor. O nome que você dá às chaves será usado pelo Redux como o nome do pedaço de estado associado. Normalmente, é uma boa prática criar um redutor para cada estado de aplicativo quando eles são distintos ou exclusivos de alguma forma. Por exemplo, em um aplicativo de anotações com autenticação de usuário, um redutor pode manipular a autenticação enquanto outro manipula o texto e as anotações que o usuário está enviando. Para tal aplicação, podemos escrever o método combineReducers()
desta forma: const rootReducer = Redux.combineReducers ({Agora, as
auth: authenticationReducer,
notas: notesReducer
});
notes
principais conterão todo o estado associado às nossas anotações e notesReducer
manipuladas pelo nosso notesReducer
. É assim que vários redutores podem ser compostos para gerenciar um estado de aplicativo mais complexo. Neste exemplo, o estado mantido no repositório do Redux seria, então, um único objeto contendo as propriedades auth
e notes
. Instructions
counterReducer()
e authReducer()
fornecidas no editor de código, junto com um repositório Redux. Termine de escrever a função rootReducer()
usando o método Redux.combineReducers()
. Atribua counterReducer
a uma chave chamada count
e authReducer
a uma chave chamada auth
. Tests
tests:
- text: O <code>counterReducer</code> deve incrementar e decrementar o <code>state</code> .
testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })(), "The <code>counterReducer</code> should increment and decrement the <code>state</code>.");'
- text: O <code>authReducer</code> deve alternar o <code>state</code> de <code>authenticated</code> entre <code>true</code> e <code>false</code> .
testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })(), "The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.");'
- text: 'O <code>state</code> loja deve ter duas chaves: <code>count</code> , que contém um número, e <code>auth</code> , que contém um objeto. O objeto <code>auth</code> deve ter uma propriedade de <code>authenticated</code> , que contém um booleano.'
testString: 'assert((function() { const state = store.getState(); return typeof state.auth === "object" && typeof state.auth.authenticated === "boolean" && typeof state.count === "number" })(), "The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.");'
- text: O <code>rootReducer</code> deve ser uma função que combina o <code>counterReducer</code> e o <code>authReducer</code> .
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return typeof rootReducer === "function" && noWhiteSpace.includes("Redux.combineReducers") })(), "The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.");'
Challenge Seed
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 LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';
const authReducer = (state = {authenticated: false}, action) => {
switch(action.type) {
case LOGIN:
return {
authenticated: true
}
case LOGOUT:
return {
authenticated: false
}
default:
return state;
}
};
const rootReducer = // define the root reducer here
const store = Redux.createStore(rootReducer);
Solution
// solution required