MapStateToProps 到同步上下文中的组件状态

Question

I know we can easily send the content of mapStateToProps in the component's state by doing so :

constructor(props){
  super(props);

  this.state = {
     filteredApps: this.props.apps
  }
}

In this usecase, this.state.filteredApps gets filled with what was mapped to props from Redux.

But what if this.props.apps is only filled properly after an async call? In an async context, this.props.apps will probably be an empty array for when it is initialized until the real data is fetched. Take this as an example :

class AppFilterer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      filteredApps : this.props.apps
    }
  }

  componentWillMount() {
      this.props.getApps();
  }

  render(){ return <div> </div> }

}

const mapStateToProps = state => {
   let { apps } = state.Admin;
   return { apps };
};

export default connect(mapStateToProps, { getApps })(AppFilterer);

In this case, my Redux action (which is caught by an Saga) this.props.getApps(); is the call that fills my props full of apps and is called from the componentWillMount function. It is initialized as an empty array and then gets filled with apps once the call is complete.

I wish to filter these apps once they are fetched from the API so want to put them inside my component's state so that I don't mess with the Redux state. What is the best practice for updating the component's state in this case? In other words, is there any way to take the result of a saga that has been mapped to props and set it into the component's state or am I looking for a weird pattern and should filter it some other way?

Answer 1

First of all API calls go in componentDidMount not in componentWillMount which is also now deprecated. Please refer this guide:

https://reactjs.org/docs/react-component.html

Secondly, when you are using redux state and mapping it to props, you should not set that in your component local state, that's not a good practice. You'll receive updated props when your promise will return and you can always rely on props in that scenario.

But if you still want to do that you can override componentDidUpdate(prevProps) which will be called when your props or state is updated. Here is where you can set your state if you still want to do that.

Note for your filter thing

You can do filtering in componentDidUpdate method like: this.setState({filteredApps. this.props.apps.filter(<your filter logic>)})