CODEWITHSUNDEEP
typescriptreact-nativereduxreact-redux
LizHamer
LizHamer

Reputation: 81

React Redux Undefined Object Passed into the Reducer

I'm working on my first React Redux application in typescript and I have a peculiar error in that the object that the reducer is receiving is 'undefined'.

types.ts

//Action types
export const ADD_FAVOURITE = 'ADD_FAVOURITE'
export const REMOVE_FAVOURITE = 'REMOVE_FAVOURITE'

//Add favourite action
interface addFavouriteAction {
  type: typeof ADD_FAVOURITE,
  favourite: ImageThumbnail
}

//Remove favourite action
interface removeFavouriteAction {
  type: typeof REMOVE_FAVOURITE,
  id: string
}

export type favouriteActionTypes = addFavouriteAction | removeFavouriteAction

export interface favouriteState {
  favourites: ImageThumbnail[]
}

export const initialState: favouriteState = {
  favourites: []
}

export type rootState = ReturnType<typeof favouriteReducer>

store.ts

export const rootReducer = combineReducers({
  favouriteReducer
})

const store = createStore(rootReducer)
export default store

actions.ts

export function addFavourite (image: ImageThumbnail): favouriteActionTypes {
  return {
    type: ADD_FAVOURITE,
    favourite: image
  }
}

export function removeFavourite (id: string): favouriteActionTypes {
  return {
    type: REMOVE_FAVOURITE,
    id: id
  }
}

reducers.ts

export function favouriteReducer(
  state = initialState,
  action: favouriteActionTypes
): favouriteState {
  switch (action.type) {
    case ADD_FAVOURITE:
      console.log(`am here in add fav object is: ${action.favourite}`)
      return {
        favourites: [...state.favourites, action.favourite]
      }
    case REMOVE_FAVOURITE:
      return {
        favourites: state.favourites.filter(
          favourite => favourite.id !== action.id
        )
      }
    default:
      return state
  }
}

The console.log in the reducer always returns an undefined object.

The component that is calling these actions with buttons is as follows. The this.props.imageThumbnail is a valid object that is being passed into the addFavourite/removeFavourite functions.

component.tsx

const mapState = (state: rootState) => ({
  favourites: state.favourites
})

const mapDispatch = {
  addFavourite: (image: ImageThumbnail) => ({ type: 'ADD_FAVOURITE' }),
  removeFavourite: (id: string) => ({ type: 'REMOVE_FAVOURITE' })
}

//component declaration

//render method

<TouchableOpacity
  onPress={() => this.props.addFavourite(this.props.imageThumbnail)}
/>
<TouchableOpacity
  onPress={() => this.props.removeFavourite(this.props.imageThumbnail.id)}
/>

const connector = connect(
  mapState,
  mapDispatch
)

type PropsFromRedux = ConnectedProps<typeof connector>

export default connector(component)

Upvotes: 0

Views: 209

Answers (2)

l.dev
l.dev

Reputation: 46

You are not passing the image to the action. This should be:

addFavourite: (image: ImageThumbnail) => ({ type: 'ADD_FAVOURITE', favourite: image }),

Upvotes: 1

Parsa Nasirimehr
Parsa Nasirimehr

Reputation: 408

The problem is in your component.tsx . The mapping you have done should be like this:

const mapDispatchToProps = (dispatch) => {
    return {
      addFavourite: (image: ImageThumbnail) => (dispatch(addFavourite(image)),
      removeFavourite: (id: string) => (dispatch(removeFavourite(id))
    };
};

so that the data you provide would be given to the actions. addFavorite and removeFavorite should also be imported from your actions.ts.

Upvotes: 0

Related Questions