CODEWITHSUNDEEP
reactjsredux
PotatoBox
PotatoBox

Reputation: 608

How to properly access Redux store in the React component?

I'm working on React frontend, currently have working backend. I would like to display server-side messages during login, besides client-side validation, like if all fields are filled. I'm having troubles with accessing Redux store in my component, even though I've wrote mapStateToProps function and as I've read, values returned from an action should be mapped to props, so I should be able to retrieve them. My code: https://codesandbox.io/s/rough-firefly-4kcdl (I'm sorry for syntax error regarding an arrow function). As you can see on the attached screenshot, there are some values in Redux store, and I would like to be able to use some of them in coresponding component.

enter image description here

Upvotes: 1

Views: 75

Answers (2)

Maiko Morales Roman
Maiko Morales Roman

Reputation: 106

In your auth reducer case LOGIN_FAILURE your new state has a different structure, instead of returning { action } return { ...state, errors: action.errors, isLoading: action.isLoading } because that's what your component is expecting

Upvotes: 1

Ahmad Noor
Ahmad Noor

Reputation: 149

Hey i have share a link with you where i have defined how you can use mapStateToProps and mapDispatchToProps in mostly used pattern

https://codesandbox.io/s/cool-oskar-oj4s4?fontsize=14

in your reducers please change your Login_Failure case return statement. you have to return all the remaining state to component because reducer always return state object

 return {
   ...state
  }

and check you Login component i have defined proper way to get updated state and dispatch your actions you can get your state with your reducers name

Upvotes: 1

Related Questions