CODEWITHSUNDEEP
reduxreact-redux
Xena
Xena

Reputation: 377

how to fix issue with action type reducer

I've created react app with react-reducer. I've declared types for actions and in the main Reduce I face an issue: Can't read property type of undefined

import {ADD_USERS, DELETE_USER, GET_USERS} from '../types'


const initialState = {
    users: [
      {
        id: 1, 
        name: 'Oksana'
      },
      {
        id: 2, 
        name: 'Serge'
      },

    ],
    loading: true
}

export default function(state = initialState, action){
    switch(action.type){
        case GET_USERS:
        return {
            ...state,
            users: action.payload,
            loading: false

        }
        case ADD_USERS:
          const newId = state.users[state.users.length-1] + 1
          return {
              ...state,
              users: {
                [newId] : {
                  id: newId,
                  name: action.name
                }
              },
              loading: false
  
          }
          case DELETE_USER :
            return {
              ...state, 
              users: state.users.filter(i => i.id !== action.id)
            }
        default: return state
    }

}

so here I implement simple get/delete/add methods.

export function getUsers (name) {
   return {
     type: GET_USERS,
     payload: name
   }
}

....

and this is actions file I export all the actions, idk where could I make a mistake the rest of actions I've not mentioned.

Upvotes: 1

Views: 673

Answers (1)

aseidma
aseidma

Reputation: 752

Your switch statement uses action.type, however action is undefined in at least one of the actions you pass to the reducer. Either add a default value to action or add a guard before the switch-statement like so:

export default function(state = initialState, action){
    if (!action) {
       return state
    }

    switch(action.type){
        case GET_USERS:
        return {
            ...state,
            users: action.payload,
            loading: false

        }
    ...

As you have a default condition already, adding a default value to action, e.g. action = {} might be the cleaner solution.

If you use Typescript you could also just do the following:

export default function(state = initialState, action){
    switch(action?.type){
        case GET_USERS:
        return {
            ...state,
            users: action.payload,
            loading: false

        }
    ...

Upvotes: 4

Related Questions