CODEWITHSUNDEEP
reactjsreduxreact-redux
Imestin
Imestin

Reputation: 49

Redux store element seems to be null or undefined

I refactored my application to use Redux. On first load it seems to work, I can click on "About" and clearly the action is working correctly, elements are not null. 

Reducer:  
Object { listItems: (2) […], currentItem: null, currentDisplay: "board" }

Object { type: "@@redux/INITk.b.x.9.2.l" }

So it seems like it's working. But when I click on "Shop" or an item, I will get error:

TypeError: this.props.listItems is undefined

or

TypeError: this.props.currentItem is undefined

So it seems like as if the store would be empty, but it's not true, it's not empty.

This is my mapStateToProps and export sentence:

function mapStateToProps(state) {
    return {
      listItems: state.listItems,
      currentItem: state.currentItem,
      currentDisplay: state.currentDisplay,
    }
  }

export default connect(mapStateToProps)(Thumbnails);

This is in Thumbnails.js, which must run when the page is loaded, because the items are displayed. I run out of ideas. I wrote a lot of console.log and it really seems that I'm able to update store, there doesn't seem to be a problem with that.

This is code on Github: https://github.com/imestin/IPFS-Store Error is in Thumbnails and Item

Please help! Thank you!

Upvotes: 0

Views: 1131

Answers (1)

Shubham Chitransh
Shubham Chitransh

Reputation: 356

You are mutating your redux state, you need to copy old state and then update it. For eg: 

case "NAV":
            return {
                ...state,
                currentDisplay: action.display,
            };case "NAV":
            return {
                ...state,
                currentDisplay: action.display,
            };

Here is your complete reducer function:

function reducer(state = initialState, action) {
    console.log("Reducer: ", state, action);
    //  Surely item numbers gets down here. action.item is correct.

    switch (action.type) {
        case "NAV":
            return {
                ...state,
                currentDisplay: action.display,
            };
        case "ITEM_CLICKED":
            return {
                ...state,
                currentItem: action.item,
            };
        case "BUY":
            return {
                ...state,
                buy: "Not specified",
            };
        default:
            return state;
    }
}

Upvotes: 1

Related Questions