2016-07-05 11:42:41 8 Comments
I'm trying to understand the connect method of react-redux, and the functions it takes as parameters. In particular mapStateToProps()
.
The way I understand it, the return value of mapStateToProps
will be an object derived from state (as it lives in the store), whose keys will be passed to your target component (the component connect is applied to) as props.
This means that the state as consumed by your target component can have a wildly different structure from the state as it is stored on your store.
Q: Is this OK?
Q: Is this expected?
Q: Is this an anti-pattern?
Related Questions
Sponsored Content
8 Answered Questions
[SOLVED] Why use Redux over Facebook Flux?
- 2015-09-08 15:05:14
- VB_
- 232060 View
- 1097 Score
- 8 Answer
- Tags: javascript reactjs reactjs-flux flux redux
3 Answered Questions
[SOLVED] What are differences between redux, react-redux, redux-thunk?
- 2016-07-15 22:00:40
- Chetan Motamarri
- 12459 View
- 36 Score
- 3 Answer
- Tags: javascript reactjs redux reactjs-flux react-redux
4 Answered Questions
[SOLVED] Passing props to react-redux container component
- 2016-06-12 19:17:29
- Michael
- 34504 View
- 65 Score
- 4 Answer
- Tags: reactjs react-native redux react-redux
2 Answered Questions
[SOLVED] Redux - Understanding advanced mapStateToProps returning a function
- 2018-04-24 16:40:08
- iQ.
- 1364 View
- 4 Score
- 2 Answer
- Tags: javascript reactjs redux react-redux
4 Answered Questions
[SOLVED] React + Redux - What's the best way to handle CRUD in a form component?
- 2015-10-20 13:20:59
- Mike Boutin
- 39119 View
- 125 Score
- 4 Answer
- Tags: javascript reactjs crud redux
1 Answered Questions
[SOLVED] Typescript error on rendered component when using react-redux connect function
- 2018-01-18 04:15:12
- Shawn
- 222 View
- 1 Score
- 1 Answer
- Tags: reactjs typescript redux react-redux
1 Answered Questions
[SOLVED] What is ownProps in react-redux?
- 2017-12-05 06:06:30
- Iggy
- 5535 View
- 11 Score
- 1 Answer
- Tags: reactjs redux react-redux
4 Answered Questions
[SOLVED] How to export mapStateToProps and Redux Form?
- 2016-10-26 12:39:45
- hidace
- 6270 View
- 7 Score
- 4 Answer
- Tags: reactjs redux react-redux redux-form
3 Answered Questions
[SOLVED] Redux with React-Native and mapStateToProps
- 2017-01-03 07:02:48
- gpminsuk
- 2999 View
- 5 Score
- 3 Answer
- Tags: javascript reactjs react-native redux react-redux
7 comments
@zloctb 2019-01-11 12:33:04
bolerplate for describe mapstateToProps:
// This is a vastly simplified implementation of what a Redux container would do
and next
@Richard Strickland 2017-09-26 14:37:58
Q:
Is this ok?
A: yes
Q:
Is this expected?
Yes, this is expected (if you are using react-redux).
Q:
Is this an anti-pattern?
A: No, this is not an anti-pattern.
It's called "connecting" your component or "making it smart". It's by design.
It allows you to decouple your component from your state an additional time which increases the modularity of your code. It also allows you to simplify your component state as a subset of your application state which, in fact, helps you comply with the Redux pattern.
Think about it this way: a store is supposed to contain the entire state of your application.
For large applications, this could contain dozens of properties nested many layers deep.
You don't want to haul all that around on each call (expensive).
Without
mapStateToProps
or some analog thereof, you would be tempted to carve up your state another way to improve performance/simplify.@vsync 2018-09-15 07:44:28
I don't think that giving each and every component access to the entire store, however large it might be, has anything to do with performance. passing objects around does not take up memory since it's always the same object. The only reason bring to a components the parts it needs is probably 2 reasons:
(1) -
Easier deep access(2) -
Avoid bugs where a component might mess up state not belonging to it@webdeb 2016-07-05 13:46:48
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 Appstate.posts
And component
Posts
By default
connect()(Posts)
will make all state props available for the connected ComponentNow when you map the
state.posts
to your component it gets a bit nicermapDispatchToProps
normally you have to write
dispatch(anActionCreator())
with
bindActionCreators
you can do it also more easily likeNow you can use it in your Component
Update on actionCreators..
An example of an actionCreator:
deletePost
So,
bindActionCreators
will just take your actions, wrap them intodispatch
call. (I didn't read the source code of redux, but the implementation might look something like this:@ilyo 2017-10-21 11:10:33
I think I might miss something, but where does
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
gets thefetchPosts
anddeletePost
actions passed from?@webdeb 2017-10-21 13:58:20
@ilyo these are your action creators, you have to import them
@Miguel Péres 2017-12-05 12:45:17
Nice answer! I think it's also nice to emphasize that this chunk of code
state => state.posts
(themapStateToProps
function) will tell React what states will trigger a re-render of the component when updated.@Faris Rayhan 2018-01-10 07:23:23
Its damn clear answer so far
@sm chinna 2018-01-10 09:47:19
}
}
@Patrick W. McMahon 2017-09-15 19:07:11
This react & redux example is based off Mohamed Mellouki's example. But validates using prettify and linting rules. Note that we define our props and dispatch methods using PropTypes so that our compiler doesn't scream at us. This example also included some lines of code that had been missing in Mohamed's example. To use connect you will need to import it from react-redux. This example also binds the method filterItems this will prevent scope problems in the component. This source code has been auto formatted using JavaScript Prettify.
This example code is a good template for a starting place for your component.
@ArunValaven 2017-08-03 06:26:09
React-Redux
connect
is used to update store for every actions.It's very simply and clearly explained in this blog.
You can clone github project or copy paste the code from that blog to understand the Redux connect.
@zloctb 2017-09-09 06:11:23
good manual formapStateToProps thegreatcodeadventure.com/…
@Mohamed Mellouki 2016-07-05 12:40:58
You got the first part right:
Yes
mapStateToProps
has the Store state as an argument/param (provided byreact-redux::connect
) and its used to link the component with certain part of the store state.By linking I mean the object returned by
mapStateToProps
will be provided at construction time as props and any subsequent change will be available throughcomponentWillReceiveProps
.If you know the Observer design pattern it's exactly that or small variation of it.
An example would help make things clearer:
There can be another react component called
itemsFilters
that handle the display and persisting the filter state into Redux Store state, the Demo component is "listening" or "subscribed" to Redux Store state filters so whenever filters store state changes (with the help offiltersComponent
) react-redux detect that there was a change and notify or "publish" all the listening/subscribed components by sending the changes to theircomponentWillReceiveProps
which in this example will trigger a refilter of the items and refresh the display due to the fact that react state has changed.Let me know if the example is confusing or not clear enough to provide a better explanation.
As for: This means that the state as consumed by your target component can have a wildly different structure from the state as it is stored on your store.
I didn't get the question, but just know that the react state (
this.setState
) is totally different from the Redux Store state!The react state is used to handle the redraw and behavior of the react component. The react state is contained to the the component exclusively.
The Redux Store state is a combination of Redux reducers states, each is responsible of managing a small portion app logic. Those reducers attributes can be accessed with the help of
react-redux::[email protected]
by any component! Which make the Redux store state accessible app wide while component state is exclusive to itself.