Understanding React-Redux and mapStateToProps()

by

Yes, it is correct. Its just a helper function to have a simpler way to access your state properties

Imagine you have a posts key in your App state.posts 

state.posts //
/*    
{
  currentPostId: "",
  isFetching: false,
  allPosts: {}
}
*/

And component Posts

By default connect()(Posts) will make all state props available for the connected Component

const Posts = ({posts}) => (
  <div>
    {/* access posts.isFetching, access posts.allPosts */}
  </div> 
)

Now when you map the state.posts to your component it gets a bit nicer

const Posts = ({isFetching, allPosts}) => (
  <div>
    {/* access isFetching, allPosts directly */}
  </div> 
)

connect(
  state => state.posts
)(Posts)

mapDispatchToProps

normally you have to write dispatch(anActionCreator())

with bindActionCreators you can do it also more easily like

connect(
  state => state.posts,
  dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
)(Posts)

Now you can use it in your Component

const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => (
  <div>
    <button onClick={() => fetchPosts()} />Fetch posts</button>
    {/* access isFetching, allPosts directly */}
  </div> 
)

Update on actionCreators..

An example of an actionCreator: deletePost

const deletePostAction = (id) => ({
  action: 'DELETE_POST',
  payload: { id },
})

So, bindActionCreators will just take your actions, wrap them into dispatch call. (I didn’t read the source code of redux, but the implementation might look something like this:

const bindActionCreators = (actions, dispatch) => {
  return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
    actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
    return actionsMap;
  }, {})
}

More Related Contents:

  1. React Context vs React Redux, when should I use each one? [closed]
  2. How do I access store state in React Redux?
  3. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  4. Changing the layout of a component depending on Redux state
  5. Global state in React Native
  6. Redux Presentational Components Vs Container Component
  7. How can I dispatch function in redux?
  8. Component won’t update when a redux state change occurs
  9. Could not find “store” in either the context or props of “Connect(App)”
  10. Programmatically Navigate using react-router
  11. How to dispatch a Redux action with a timeout?
  12. React useEffect in depth / use of useEffect?
  13. How can I display a modal dialog in Redux that performs asynchronous actions?
  14. Await is a reserved word error inside async function
  15. What is {this.props.children} and when you should use it?
  16. How to overcome the CORS issue in ReactJS
  17. How to update single value inside specific array item in redux
  18. Why use Redux over Facebook Flux? [closed]
  19. React: how to load and render external html file?
  20. redux fetch body is not use with no cors mode
  21. Read Store’s Initial State in Redux Reducer
  22. How to sync Redux state and url hash tag params
  23. How to trigger off callback after updating state in Redux?
  24. Cannot update a component while rendering a different component warning
  25. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  26. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  27. Programmatically change Redux-Form Field value
  28. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  29. On React Router, how to stay logged in state even page refresh?
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment