I'm new to redux and react, please need your help to solve this error at the reducer Can not read property 'type' of undefined I have checked several times but can't detect the issue if you have any question to clarify more the error ask me!, there is a component which is Counter component and the reducer, I have defined the store in the 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 component
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()
