Redux減速器初始化相同的狀態鍵

我搞亂了'simplest-redux-example' on github，我添加了第二個減少state.count的減速器。如果我在switch case語句中有遞增和遞減reducers，它可以正常工作。我想要執行的練習是將減速器拆分爲儘可能多的模塊化部分。這段代碼會拋出一個錯誤，指出count是未定義的。Redux減速器初始化相同的狀態鍵

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

來源

2015-09-20 tells

在它指出哪一行？ – zerkms

處於計數器函數中的let count = state.count。 – tells

你有沒有試過'console.log（state）'？ – zerkms

傳遞給combineReducers減速機得到不同件的狀態對象。

生成的縮減器調用每個子縮減器，並將其結果收集到單個狀態對象中。 狀態對象的形狀與傳遞的reducers的鍵匹配。

（重點煤礦）

所以，內部狀態的對象看起來像

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

這類似於具有一通量應用單獨存儲，其中每個存儲兩個操作它自己的全球應用程序狀態的「片」。

因爲你真正想要這兩個減速對狀態對象的相同部分工作，你真正想要的東西更像是reduce-reducers，雖然這是很容易實現自己，剛剛通過國家到每個減速反過來，減少每個減速器的新狀態的初始狀態。

事實上，它是如此簡單，實現短短的幾行：

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

和你rootReducer將

const rootReducer = reduceReducers(counter, decrementer);

來源

2015-09-20 04:44:33

謝謝！減少減速機是一個很好的提示。我最終能夠看到我的狀態實際上是'state = {counter：{count：0}，decrementer：{count：0}}' – tells

你是如此接近！值得注意的是，當你使用combineReducers時，它實際上會分解「狀態」，使得你所輸入的reducer的狀態是「state」對象的屬性。

因此，爲了養活他們的默認參數如下： let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});

來源

2015-09-20 07:16:35 SirRodge

Redux減速器初始化相同的狀態鍵

回答

相關問題