CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Omega
Omega

Reputation: 73

action.payload.descrition shows 'undefined' when using redux

Hello I'm new to redux and this is my first redux code.

My index.js:

    import store from './store'

    store.dispatch({
        type:"bugAdded",
        payload: {
          decription: "THIS"
        }
     });

My reducer.js:


let lastId = 0;

function reducer(state = [], action) {
  switch (action.type) {
    case 'bugAdded':
      return [
        ...state,
        {
          id: ++lastId,
          description: action.payload.description,
          resolved: false,
        }
      ];
    case 'bugRemoved':
      return state.filter(bug => bug.id !== action.payload.id)
    default:
      return state
  }
}

export default reducer

console.log(store.getState());

My store.js:

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer);

export default store

As per the tutorial I'm supposed to get

description: THIS

in console log, whereas I'm getting

description: undefined

console.log screenshot

Upvotes: 0

Views: 128

Answers (2)

An in real life
An in real life

Reputation: 108

import store from './store'

store.dispatch({ type:"bugAdded", payload: { decription: "THIS" } });

in you index.js file, you type wrong decription it must be description

Upvotes: 1

markerikson
markerikson

Reputation: 67469

You have a typo. You're dispatching:

payload: {
          decription: "THIS"
        }

it should be description instead.

Also, note that the style of Redux code you're writing is very outdated. Today we teach using our official Redux Toolkit package as the standard approach for using Redux, which will simplify all of the code in your app (even in this small example).

See the official Redux docs tutorials for details:

https://redux.js.org/tutorials/index

Upvotes: 2

Related Questions