React中redux的异步特性问题？

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

const fetchUser = (userId) => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_USER_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_USER_FAILURE', payload: error }));
  };
};

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

function* fetchUser(action) {
  try {
    const user = yield call(fetch, `https://api.example.com/users/${action.payload}`);
    const userData = yield user.json();
    yield put({ type: 'FETCH_USER_SUCCESS', payload: userData });
  } catch (error) {
    yield put({ type: 'FETCH_USER_FAILURE', payload: error });
  }
}

import { connect } from 'react-redux';
import { fetchUser } from './actions';

const UserComponent = ({ userId, fetchUser }) => {
  useEffect(() => {
    fetchUser(userId);
  }, [userId, fetchUser]);

  return <div>User Component</div>;
};

const mapStateToProps = (state) => ({
  userId: state.userId,
});

export default connect(mapStateToProps, { fetchUser })(UserComponent);

const UserComponent = ({ userId, fetchUser, isLoading, user }) => {
  useEffect(() => {
    fetchUser(userId);
  }, [userId, fetchUser]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>User: {user.name}</div>;
};