CODEWITHSUNDEEP
reactjsreduxredux-saga
pyyyyysv
pyyyyysv

Reputation: 1007

Can I tell when a component's call to redux-saga ends?

While the component is making a call to redux-saga, it tries to expose the load icon and hide the load icon when the call to redux-saga is finished.

// at component
const app: FunctionComponent<IProps> = ({ location, history }) => {
  ...
  const [isLoading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    ItemsActions.getItems(); <- this line is redux-saga call request

    // I want the redux saga call to be completed and the loading to end here!
    setLoading(false);

  }, []);
  ...
}

// at redux action & reducer
export function* getItemsSaga() {
  yield takeEvery(GET_ITEMS_REQUEST, function*() {
    try {
      const response = yield call(myApi, payload);
      yield put(GET_ITEMS_SUCCESS, { payload: response });

      // I want to complete the loading on the component now!

    } catch(e) {
      console.log(e);
    }
  });
}

Upvotes: 1

Views: 376

Answers (1)

Jamie - Decodefy Ltd
Jamie - Decodefy Ltd

Reputation: 1397

Just have your reducer's switch statement include GET_ITEMS_SUCCESS and change the loading variable back to false when that's fired. Don't forget to do the same for any error states.

Upvotes: 1

Related Questions