Flupper
Flupper

Reputation: 321

Cannot read property 'type' of undefined - react-redux

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()

Upvotes: 0

Views: 1125

Answers (1)

varoons
varoons

Reputation: 3887

Working on a sandbox solution but this caught my eye

export default reducer()

Change to

export default reducer

Let me know if that worked. If not will finish the sandbox implementation

Upvotes: 3

Related Questions