React Redux-form Using Child Components With Child Components That Have Multiple Submits

New to React-Redux. I have a child component that uses the following with 'handleSubmit' and this part of the code works.

Solution 1:

Is it absolutely necessary to submit stuff like sort directions, or is that in some way relevant to your backend? Seems to me like this should be a responsibility for the client.

Leaving it up to the client also has an added benefit of making all this a lot simpler, since you could just dispatch a regular action for when you want to change sort direction. That action could then call your backend with the requested sort direction and that can update the new state accordingly.

Depending on the amount of data you're dealing with, you could even choose to not call your backend at all and leave the sorting entirely up to the client.

Regarding your TableHeaders component, here's what I would do:

Have the component accept an event handler function via props, so you can notify the container when the sorting changes inside the component.

This works just fine for more smaller components, since you're just passing around functions via props.

Simplified example:

exportconstTableHeaders = (props) => {
  const { onSortByChange, onSortDirectionChange } = props;

  return (
    <div><spanonClick={() => onSortByChange('ClientNumber')}>Client #</span><spanonClick={() => onSortByChange('SomethingElse')}>Something else</span><GlyphiconDirectionChangeonSortDirectionChange={onSortDirectionChange} /></div>
  );
}

constGlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props;

  return (
    <div><spanonClick={() => onSortDirectionChange('asc')}>Asc</span><spanonClick={() => onSortDirectionChange('desc')}>Desc</span></div>
  );
}

Then in your container you can do this:

classClientsContainerextendsComponent {
  handleSortDirection = (direction) => {
    // Call Redux action to update your sort direction state
  }

  handleSortBy = (by) => {
    // Call Redux action to update your sort by state
  }

  render() {
    return (
      <div><TableHeadersonSortByChange={this.handleSortBy}onSortDirectionChange={this.handleSortDirection}
          /* otherprops */
        /></div>
    );
  }
}

In order to get the new data, you could implement componentWillUpdate and check if sort by or sort direction have changed and if so, fetch new data based on updated props.

However, I feel it would be more elegant to move that and the data fetching part from your component into an async action creator. That way your component has less responsibilities.

Share