Redux reducers ही राज्य कुंजी

Question

मैं चारों ओर 'simplest-redux-example' on github साथ खिलवाड़ कर रहा हूँ और मैं एक दूसरे कम करने कि state.count decrements जोड़ दिया है आरंभ। यदि स्विच स्विच स्टेटमेंट में मेरे पास वृद्धि और कमी reducers है, तो यह ठीक काम करता है। जिस अभ्यास को मैं करना चाहता था वह रेड्यूसर को जितना संभव हो उतना मॉड्यूलर टुकड़ों में विभाजित करना था। यह कोड एक त्रुटि बताता है कि गिनती अपरिभाषित है।

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') 
); 

Answer 1

reducers combineReducers के लिए पारित विभिन्न टुकड़े राज्य वस्तु की मिलता है।

परिणामी reducer प्रत्येक बच्चे reducer कहते हैं, और अपने परिणाम एक राज्य वस्तु में इकट्ठा। राज्य वस्तु के आकार से पारित कर दिया reducers की कुंजी से मेल खाता है।

(जोर मेरा)

तो, आंतरिक स्थिति वस्तु की तरह

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

यह एक प्रवाह आवेदन में अलग दुकानों होने, जहां प्रत्येक दुकान दोनों अपनी ही चल रही है के अनुरूप है लगेगा वैश्विक ऐप राज्य का "टुकड़ा"।

के बाद से आप वास्तव में इन दोनों reducers ही राज्य वस्तु के भाग पर काम करना चाहते हैं, आप वास्तव में अधिक reduce-reducers की तरह कुछ,, चाहते हैं, हालांकि यह अपने आप-बस को लागू करने के बदले में प्रत्येक कम करने में राज्य पारित बहुत आसान है प्रत्येक Reducer से नए राज्य के साथ प्रारंभिक राज्य को कम करना।

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

और अपने rootReducer होगा

const rootReducer = reduceReducers(counter, decrementer); 

Answer 2

तुम बहुत करीब हैं:

वास्तव में, यह इतना आसान, कार्यान्वयन बस कुछ ही लाइनों है है! पकड़ है कि जब आप combineReducers का उपयोग यह वास्तव में "राज्य" ऐसी है कि reducers आप में खिलाने के राज्यों "राज्य" वस्तु पर गुण हैं विभाजन है।

जैसे, क्रम इस प्रकार उन्हें डिफ़ॉल्ट मानकों को खिलाने के लिए में: let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});