React / Redux связывает асинхронные групповые действия на уровне компонентов - PullRequest
Новая
       6

React / Redux связывает асинхронные групповые действия на уровне компонентов

0 голосов
/ 28 октября 2018

Каков рекомендуемый способ связать зависимые асинхронные редукционные действия на уровне компонентов на уровне компонентов?

Мой пример использования - это поток, в котором мне нужно сначала выполнить вызов API для получения объекта пользователя, а затем получить всесообщения в блоге для этого пользователя.Подвох в том, что второй вызов для захвата всех сообщений в блоге зависит от возвращаемого значения первого вызова (идентификатор пользователя).

Мой компонент: 

export default class UserDetail extends React.Component
{
  componentDidMount() {
    this.props.getUser()
  }
}

this.props.getUser() возвращает объект пользователякоторый я сопоставляю с реквизитом: 

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

Мне нужно позвонить this.props.getBlogPostsForUser(USER_ID) после завершения this.props.getUser().Какова рекомендуемая лучшая практика для цепочки действий таким образом?

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Вы можете объединить в цепочку звуки 

const getUser = username => dispatch => request(username)
  .then(res => dispatch({ type: GET_USER })
  .catch(err => dispatch({ type: GET_USER_ERR }));

const getBlogPostsForUser = userId => dispatch => request(userId)
  .then(res => dispatch({ type: GET_BLOGS }))
  .catch(err => dispatch({ type: GET_BLOGS_ERR }));


const getUserAndPosts = username => (dispatch, getState) => dispatch(getUser(username))
  .then(() => {
    const user = getState().user;
    return dispatch(getBlogPostsForUser(user.id));
  });

Или вы можете объединить их в одну отправку, но затем они будут связаны вместе 

const getUserAndPosts = (username) => dispatch => request(username)
  .then((userData) => {
    dispatch(setUser(userData));
    return request(user.id)
      .then(blogs => dispatch(setBlog(blogs)));
  });
0 голосов
/ 28 октября 2018

Вы должны идентифицировать новый пользовательский ответ, поступающий в метод жизненного цикла componentDidUpdate, чтобы вызвать другой зависимый вызов.Вот так 

export default class UserDetail extends React.Component {
  componentDidMount() {
    this.props.getUser();
  }
  componentDidUpdate(prevProps) {
    const { user, getBlogPostsForUser } = this.props;
    const { user: prevUser } = prevProps;
    if (prevUser !== user) {
      const { USER_ID } = user; // derive USER_ID from user object. I dont know path. you can accordingly change
      getBlogPostsForUser(USER_ID);
    }
  }
}

Это должно работать.Отзывы приветствуются

...