Benjamin Li Benjamin Li - 1 month ago 22
React JSX Question

this.props object in redux

I am looking at this source code of this async example. I want to know the

this.props
object. so I add debugger in the code, and I can see it looks like this.

enter image description here

my question is, why it contains these fields? thanks

Joy Joy
Answer

In Redux, the props are prepared and passed to the component through connect function (connect documentation.

It accepts arguments:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps is the function to map "state from the store" to the "props used by the component".

This function accepts the state of the redux store as the parameter, process/filter them, and return an object:

  return {
    selectedReddit,
    posts,
    isFetching,
    lastUpdated
  }

That will be passed to the component.

The remaining value dispatch is injected by default:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, ... If you omit it, the default implementation just injects dispatch into your component’s props.

Reference: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

The function dispatch is used to dispatch an action (returned by some action creator). dispatching an action will trigger Redux to re-evaluate the store, pass the store value to the react DOM tree from top to down, and re-render the components if needed.

Reference: http://redux.js.org/docs/api/Store.html#dispatch

Comments