CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Gal Grünfeld
Gal Grünfeld

Reputation: 840

React+Redux | Prop Returns Undefined Here - Why?

I recently learned some basic Redux and went over the tutorial on their docs.

I have a React presentational class component that I want for it to also be its own container components, named Word.

I want its props' values to come from the Redux store. I was able to successfully get initial values for its props from the initial state of the store, but when I try to dispatch an action, its property wordParts returns undefined.

This is the structure of the Word:

Word : {
  wordParts : <array>
  stem : <object> //I'm using a string for now for testing
}

This is the structure of the store:

store : {
  word : {
    wordParts : <array>
    stem : <object> //I'm using a string for now for testing
  }
}

This is what I want the actions to do when they're dispatched:

//is used to update Word.stem
replaceStem(stem) = currentStem => newStem 

//is used to add a some `suffix` variable as the last element of the current Word.wordParts
addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix]

This is my code - I have some other non-relevant code, I changed it a bit to remove irrelevant code (such as styling), but it should behave the same as my local code.

https://codesandbox.io/s/rj2xlryx8m

Upvotes: 0

Views: 198

Answers (4)

lakmal_sathyajith
lakmal_sathyajith

Reputation: 325

Bit of confusion with the destruction part of the object

addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix]

since there is no 'suffix' key in the original object to replace with.

Upvotes: 0

Gal Gr&#252;nfeld
Gal Gr&#252;nfeld

Reputation: 840

Solution found + explanation:

Explanation: The component got its props from the class, so it did get initialized correctly, as when the an instance of that class called in its constructor to props taken from the store. Those initial states kept being stored as properties of the class, and when accessed as properties of the object, the returned values were the same ones that were stored in the class.

The solution: Remove/not use those props as class properties, and instead call them from the render() function that gets recalled on changes to the component (in this case, change in its props, that is made by mapStateToProps, which is triggered by a change in the Redux store).

Upvotes: 0

Soham Bhattacharjee
Soham Bhattacharjee

Reputation: 94

What you need to add is a connet statement (from the library react-redux). That exports a function called mapStateToProps. It is a HOC that takes parts of the redux store and passes them on to your component props.

Upvotes: 0

vencheto0
vencheto0

Reputation: 21

You have very weird structure and markup for both React and Redux and I can't give you the correct syntax, but in the Word container in this mapStateToProps you need to return these props that come from the Redux store:

return {
 whateverProps: state.whateverProps
}

and then when you want to pass these props in your component you can access and pass them with:

this.props.whateverProps

Upvotes: 2

Related Questions