私は'simplest-redux-example' on githubでうんざりしています。私はstate.countを減少させる2番目のレデューサーを追加しました。私がswitch caseステートメントでインクリメントとデクリメントレデューサーを持っていればうまく動作します。私が実行したかったエクササイズは、減速機をできるだけ多くのモジュール部品に分割することでした。このコードは、countが未定義であるというエラーをスローします。 combineReducers
に渡さ同じ状態キーを初期化する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')
);
を、それはそれを述べてどのラインで次のようにそれらをデフォルトパラメータを供給するために、このように
、? – zerkms
はカウンタ機能のlet count = state.countにあります。 – tells
そして、あなたは 'console.log(state)'しようとしましたか? – zerkms