What is the best way to trigger actions from child components within React Redux?

Question

What is the best way to trigger actions from child components within React Redux?

My server contains the following code snippet:

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

The <Layout> component includes more nested components.

Further down in my code, I have a class that looks like this:

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>
    );
  }
});

Instead of using this.props.onClick, I would like to dispatch an event to update the state in a reducer. I've come across some information online regarding context but there seems to be conflicting opinions on whether or not it is being deprecated.

EDIT I have found mention of this connect method, but I recall reading advice against using connect in child components.

javascript reactjs react-redux

Answer 1

Answer №1

Instead of focusing too much on children components, a better approach is to organize your app with connected and non-connected components. Non-connected components should be stateless, pure functions that receive all necessary data through props. Connected components, on the other hand, should utilize the connect function to link redux state and dispatcher to props, and then handle passing these props down to child components.

Your application may have numerous connected and non-connected components. For further insight into this design pattern, you can refer to this article (authored by the creator of redux), which delves deeper into the roles of non-connected (dumb) components for UI display and connected (smart) components for component composition.

Consider the following example (using newer 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 scenario, ImageList functions as a connected component while Image serves as a non-connected component.

Answer 2

Instead of focusing too much on children components, a better approach is to organize your app with connected and non-connected components. Non-connected components should be stateless, pure functions that receive all necessary data through props. Connected components, on the other hand, should utilize the connect function to link redux state and dispatcher to props, and then handle passing these props down to child components.

Your application may have numerous connected and non-connected components. For further insight into this design pattern, you can refer to this article (authored by the creator of redux), which delves deeper into the roles of non-connected (dumb) components for UI display and connected (smart) components for component composition.

Consider the following example (using newer 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 scenario, ImageList functions as a connected component while Image serves as a non-connected component.

Answer 3

Answer №2

It was once suggested to limit the number of components you connect. For more information, check out these links:

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

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

However, this advice is more relevant when delegating a portion of state to a component. If it fits your situation or if you prefer not to pass a callback that calls dispatch(), you can pass the store or dispatch down the hierarchy instead.

Answer 4

It was once suggested to limit the number of components you connect. For more information, check out these links:

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

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

However, this advice is more relevant when delegating a portion of state to a component. If it fits your situation or if you prefer not to pass a callback that calls dispatch(), you can pass the store or dispatch down the hierarchy instead.

What is the best way to trigger actions from child components within React Redux?

Answer №1

Answer №2

Similar questions

React application experiencing continuous SpeechRecognition API without stopping

Sending data as a string in an AJAX request

Submitting a Yii 2 form automatically when it loads

Can you explain how to invoke a class with express().use function?

What is the significance of the term "Object object"?

Ways to conceal the scroll bar upon the initial loading of a webpage

Tips for creating a zoomable drawing

When attempting to open a popup form by clicking a button, the code fails to function on IE6

What is the best way to activate an input field in react-select?

The error message "ReferenceError: express is not defined" indicates that Node.js is

Conceal or reveal input elements with a toggle function in jQuery by utilizing

Is it possible for jQuery UI Tabs to load entire new HTML pages?

Error in NVD3 causing charts to be inaccurately rendered

I understand the reason behind the unexpected { token error, but I'm unsure of how to resolve it when my PHP script needs to transmit a collection of data to JavaScript

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

What is the purpose of implementing asynchronous loading for JavaScript in my webpack setup?

Tips for real-time editing a class or functional component in Storybook

Using RxJS v5 for Sending a POST Request with Parameters

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Display the Add button in the React Material-UI autocomplete when there are zero search results available