how to fix preact component not re render on unistore action with multiple setState?

Viewed 251

I tried to change isLoading to true before we start fetching data and change it again to false when finished.

The state both is change, but unfortunately component not re-render at first setState. Component doing render again just at last setState

I also tried doing setState({ isLoading: true }) in separate action and call it inside getJobs but result still same.

actions.js

import Api from '../api';

const actions = store => ({
  async getJobs() {
    store.setState({ isLoading: true });
    // store is changed but component is not re-render

    const { data } = await Api.get(`/jobs`);

    store.setState({ jobs: data, isLoading: false });
    // store is changed and component do re-render
  }
});

export default actions;

jobs.js

import { h, Component } from 'preact';
import { connect } from 'unistore/preact';

import actions from '../actions';
import Jobs from './Job';

class JobList extends Component {
  componentDidMount() {
    this.props.getJobs();
  }

  renderJobs() {
    return this.props.jobs.map(job => <Jobs key={job.id} {...job} />);
  }

  render() {
    if (this.props.isLoading) {
      return <p>loading...</p>;
    }

    return (
      <div style={{ flex: 1 }} className="container py-3">
        <div className="row">{this.renderJobs()}</div>
      </div>
    );
  }
}

export default connect(['isLoading', 'jobs'], actions)(JobList);

I expect when we change isLoading to true, they will show loading text first but its not.

unistore version: 3.5.0 preact version: 10.0.1

0 Answers
Related