React-Redux Dispatch design

Question

Overview

We have a page with a header (Blue color) and content section (Green color) that can be seen in image below. The requirement is when a user selects a year in header, then the content page will show data as per the selected year.

What is happening right now Technically

When user selects a year in header, we dispatch the selected value and the active container's mapStateToProps function is triggered and the selected year is passed to the component.

class Page1Content extends Component {
}

function mapStateToProps(state) {
    return { selectedYear : state.userSelectedValue };
}

export default connect(mapStateToProps, null)(Page1Content);

Question 1

How will data on Page1Content will refresh? Few approaches:

In ComponentDidUpdate react life cycle method of the Page1Content API to fetch data can be called. However have seen opinions where we should avoid React hooks and life cycle methods with Redux.
In mapStateToProps function API can be called.

Can any one suggest what is the better place to call the API?

Question 2

Data on Page1Content will be used only by this page. This data will not be used by any other component and hence need not be shared by any other Component. Now question 2 is

In case we decide to use ComponentDidUpdate should we again dispatch the API call using Thunk or any other library and then catch the response in mapStatesToProps again?
Or we should make the API call and resolve it in the component itself as a promise. Then the response will be set in State and respective Template will be refreshed.

iqbal125 · Accepted Answer · 2019-05-30 21:48:15Z

1

ComponentDidUpdate is a lifecycle method not a hook. Hooks is functionality that allows functional components to have class based functionality such as state. You are using a class based component in your example so you are not using hooks.

https://reactjs.org/docs/hooks-intro.html

Yes Redux shouldnt be used with hooks since context is a better option.

You can lift state up so to speak and update the local state in the parent component getting rid of redux completely.

Just pass down the setState function and the state itself to the appropriate children.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
               some_prop: false
             }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({some_prop: true})
    console.log('Click happened');
  }
  render() {
    return (
     <Header onClick={this.handleClick } />
     <Page1Component props={this.state.some_prop} />
  }
}

Edit:

Question 1

How will data on Page1Content will refresh?

best option is with a ternary expression in your render method, there is no need to check if the state updated. In react if the state is changed your component will automatically re render.

  render() {
    return (
      <div>
        {this.props.selectedYear
           ? <p> {this.props.selectedYear}</p>
           : null 
         }
      </div>       

  }
}

Question 2

Data on Page1Content will be used only by this page. This data will not be used by any other component and hence need not be shared by any other Component. Now question 2 is

If I understand this correctly you will need to use an action creators, redux thunk is overkill here.

class Header extends Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.dispatchActionCreator({some_value})
    console.log('Click happened');
  }
  render() {
    return (
      <button onClick={(some_value) => this.handleClick(some_value)}>Click </button>
  }
}

function mapDispatchToProps(state) {
    return { 
       dispatchActioNCreator: (some_value) => dispatch(ACTIONS.action_creator(some_value) };
}

This will save your value from your header to the global redux state and then you can just access with mapStateToProps in your Page1Component.

edited May 30, 2019 at 21:48

answered May 30, 2019 at 21:20

iqbal125

1,4313 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sandy Over a year ago

I see your point. My question is basically a representation of a major framework so Header and Page1Content may not present as shown in your solution. There are many more components as well. So, Redux will be in place and can't be avoided. Could you please suggest me to the Question1 and Question2 section of my post. +1

Rikin Over a year ago

they are also often referred to as lifecycle hooks. That dates back when hooks were not even introduced.

Collectives™ on Stack Overflow

React-Redux Dispatch design

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related