我正在搞乱github 上的“最简单的 Redux 示例” https://github.com/jackielii/simplest-redux-example我添加了第二个减少 state.count 的减速器。如果我在 switch case 语句中有增量和减量缩减器,它就可以正常工作。我想要执行的练习是将减速器分成尽可能多的模块化部分。此代码抛出一个错误,指出计数未定义。
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')
);
减速器传递给combineReducers
变得不同pieces状态对象的。
生成的减速器调用每个子减速器,并将其结果收集到单个状态对象中。状态对象的形状与传递的键相匹配reducers
.
(强调我的)
所以,内部状态对象看起来像
{
counter: result of passing `state.counter` into counter reducer
decrementer: result of passing `state.decrementer` into decrementer reducer
}
这类似于在 Flux 应用程序中拥有单独的商店,其中每个商店都运行自己的全局应用程序状态的“部分”。
因为您实际上希望这两个减速器在same状态对象的一部分,你实际上想要的东西更像减少减速器 https://github.com/acdlite/reduce-reducers,尽管自己实现起来非常容易——只需将状态依次传递到每个减速器中,用来自每个减速器的新状态来减少初始状态。
其实就这么简单,实现就几行:
export default function reduceReducers(...reducers) {
return (previous, current) =>
reducers.reduce(
(p, r) => r(p, current),
previous
);
}
和你的rootReducer
将会
const rootReducer = reduceReducers(counter, decrementer);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)