无法读取未定义的属性“类型”-react-redux
2020-02-08
1121
我是 redux 和 react 的新手,请帮助解决 Reducer 中的这个错误 无法读取未定义的属性“type” 我已经检查了好几次,但无法检测到问题,如果您有任何问题需要进一步澄清错误,请问我!,有一个组件是 Counter 组件和 Reducer,我已经在 index.js 中定义了存储
index.js
import {createStore} from "redux";
import reducer from "./store/reducer";
import {Provider} from 'react-redux'
const Store = createStore(reducer)
ReactDOM.render(
<Provider store={Store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
Counter.js 组件
render () {
return (
<div>
<CounterOutput value={this.props.ctr} />
<CounterControl label="Increment" clicked={this.props.onIncrement} />
<CounterControl label="Decrement" clicked={this.props.onDecrement} />
<CounterControl label="Add 5" clicked={this.props.ADDFive} />
<CounterControl label="Subtract 5" clicked={this.props.SUBFive} />
<button onclick={this.props.RESTORE}>Store Results</button>
<ul>
{this.props.rst.map((index,value) => (
<li key={index} onclick={() => this.props.REMOVE(index)}>value</li>
))}
</ul>
</div>
);
}
}
const mapStateToProps=(state)=>{
return{
ctr:state.counter,
rst:state.results
}
}
const mapDispatchToProps=(dispatch)=>{
return{
onIncrement: () => dispatch({type:'INC_COUNTER'}),
onDecrement:() => dispatch({type:'DEC_COUNTER'}),
ADDFive:() => dispatch({type:'ADD_COUNTER',value:5}),
SUBFive:() => dispatch({type:'SUB_COUNTER',value:5}),
RESTORE:()=> dispatch({type:'RESTORE'}),
REMOVE: () => dispatch({type:'REMOVE'})
};
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);
reducer.js
const initialState={
counter:0,
results:[]
}
const reducer=(state=initialState,action)=>{
switch (action.type) {
case('INC_COUNTER'):
return {
...state,
counter:state.counter+1
}
case('DEC_COUNTER'):
return {
...state,
counter:state.counter-1
}
case('ADD_COUNTER'):
return {
...state,
counter:state.counter+action.value
}
case('SUB_COUNTER'):
return {
...state,
counter:state.counter-action.value
}
case('RESTORE'):
return {
...state,
results:[...state.results,state.counter]
}
case('REMOVE'):
return {
...state,
results:[...state.results,state.counter]
}
default:
return state
}
}
export default reducer()
1个回答
正在研究沙盒解决方案,但这引起了我的注意
export default reducer()
更改为
export default reducer
如果可行,请告诉我。如果不行,将完成沙盒实施
varoons
2020-02-08