Réducteurs Redux initialisant la même clé d'état

Je gagne avec l'exemple «plus simple-redux» sur github et j'ai ajouté un deuxième réducteur qui décrémente state.count. Si j'ai les réducteurs d'incrémentation et de décrément dans une déclaration de cas de commutation, cela fonctionne bien. L'exercice que je voulais effectuer était de diviser les réducteurs en autant de pièces modulaires que possible. Ce code lance une erreur indiquant que le compte est indéfini.

import React from 'react'; import { createStore, combineReducers } from 'redux'; import { Provider, connect } from 'react-redux'; // React component class Counter extends React.Component { render(){ const { value, onIncreaseClick, onDecreaseClick } = this.props; return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>Increase</button> <button onClick={onDecreaseClick}>Decrease</button> </div> ); } } // Action: const increaseAction = {type: 'increase'}; const decreaseAction = {type: 'decrease'}; // Reducer: function counter(state, action) { let count = state.count; switch(action.type){ case 'increase': return {count: count+1}; default: return state; } } function decrementer(state, action) { let count = state.count; switch(action.type){ case 'decrease': return {count: count -1}; default: return state; } } const rootReducer = combineReducers({ counter, decrementer }) // Store: let store = createStore(rootReducer, {count: 0}); // Map Redux state to component props function mapStateToProps(state) { console.log("mapStatetoProps heyyyy"); return { value: state.count }; } // Map Redux actions to component props function mapDispatchToProps(dispatch) { console.log("mapDispatchtoProps heyyyy"); return { onIncreaseClick: () => dispatch(increaseAction), onDecreaseClick: () => dispatch(decreaseAction) }; } // Connected Component: let App = connect( mapStateToProps, mapDispatchToProps )(Counter); React.render( <Provider store={store}> {() => <App />} </Provider>, document.getElementById('root') );

Les réducteurs passés à combineReducers obtiennent des pièces différentes de l'objet d'état.

Le réducteur qui en résulte appelle chaque réducteur enfant et rassemble ses résultats dans un seul objet d'état. La forme de l'objet d'état correspond aux touches des reducers passés.

(L'accent est mis)

Donc, l'objet d'état interne ressemblerait

 { counter: result of passing `state.counter` into counter reducer decrementer: result of passing `state.decrementer` into decrementer reducer }

Ceci est analogue à avoir des magasins distincts dans une application de flux, où chaque magasin exploite ses propres "pièces" de l'état de l'application globale.

Étant donné que vous voulez vraiment que ces deux réducteurs fonctionnent sur la même partie de l'objet d'état, vous voulez vraiment quelque chose de plus comme des réducteurs réduits , bien qu'il soit très facile à mettre en œuvre, passez simplement l'état dans chaque réducteur, réduisant ainsi l'état initial Avec le nouvel état de chaque réducteur.

En fait, c'est tellement simple, la mise en œuvre est juste quelques lignes:

 export default function reduceReducers(...reducers) { return (previous, current) => reducers.reduce( (p, r) => r(p, current), previous ); }

Et votre rootReducer serait

 const rootReducer = reduceReducers(counter, decrementer);

Vous êtes si proche! La capture est que lorsque vous utilisez combineReducers, il divise le «état» de sorte que les états des réducteurs que vous introduisez sont des propriétés sur l'objet «état».

En tant que tel, afin de les alimenter par défaut des paramètres comme suit: let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});