Geek Answers Handbook

How can I send child components to React Redux?

My server has this code:

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout> obviously has more components that nest more.

I have a class similar to this deeper:

 import React from 'react'; export default React.createClass({ render: function(){ var classes = [ 'js-select-product', 'pseudo-link' ]; if (this.props.selected) { classes.push('bold'); } return ( <li className="js-product-selection"> <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span> </li> ); } });

What I really want to do, not this.props.onClick , sends an event to set the state in the reducer . I did say something about the context, but I have mixed reviews as this feature was or wasn’t gone.

EDIT I see this connection method , but I could have sworn I would have read so as not to use connect in child components.

+6
source share
2 answers

You are too hung up on children's components. You must structure your application so that you connect components and unrelated components. Non-connected components should be stand-alone, essentially pure functions that accept all their requirements through the requisites. Connected components should use the connect function to display the state of the reduction in the details and the reducer manager in the details, and then be responsible for transferring these details to the child components.

You can have many connected components in an application and many insecure components. This post (the author of the redux) discusses it in more detail and talks about unrelated (dumb) components responsible for the actual display of the user interface and connected (smart) components responsible for compiling unrelated components.

An example would be (using some new syntax):

 class Image extends React { render() { return ( <div> <h1>{this.props.name}</h1> <img src={this.props.src} /> <button onClick={this.props.onClick}>Click me</button> </div> ); } } class ImageList extends React { render() { return ( this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />) ); } } const mapStateToProps = (state) => { return { images: state.images, }; }; const mapDispatchToProps = (dispatch) => { return { updateImage: () => dispatch(updateImageAction()), }; }; export default connect(mapStateToProps, mapDispatchToProps)(ImageList);

In this example, ImageList is a connected component, and Image is an unrelated component.

+16
source

There used to be recommendations for trying to limit the components that you plug in. See for example:

https://github.com/reactjs/redux/issues/419

https://github.com/reactjs/redux/issues/419#issuecomment-178850728

In any case, this is really more useful for delegating a state slice to a component. You can do this if it makes sense for your situation, or if you do not want to pass the callback that dispatch() calls, you can pass the store or send down the hierarchy if you want.

0
source

More articles:


All Articles