установить пользовательские данные в состояние после успешного вызова API - Redux Saga - PullRequest
Новая
       7

установить пользовательские данные в состояние после успешного вызова API - Redux Saga

0 голосов
/ 18 февраля 2019

У меня есть форма «Мой профиль», в которой отображаются сведения о пользователе.

API-вызов для извлечения пользовательских данных выглядит следующим образом. 

componentDidMount() {
    this.props.getUserDetails();
  }

Файл саги выглядит следующим образом 

function* fetchUserDetails() {
  try {
    const response = yield call(userDetailsApi);
    const user = response.data.user;

    // dispatch a success action to the store
    yield put({ type: types.USER_DETAILS_SUCCESS, user});

  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put({ type: types.USER_DETAILS_FAILURE, error });
  }
}

export function* watchUserFetchRequest() {
  yield takeLatest(types.USER_DETAILS_REQUEST, fetchUserDetails);
}

Редуктор выглядит следующим образом: 

export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    case types.USER_DETAILS_SUCCESS:
      return {
        ...state,
        user: action.user,
        loading: false
      };
    default:
      return state;
  }
}

Теперь мне нужно установить данные пользователя в состоянии , чтобы при изменении значений формы я мог вызватьФункция handleChange для обновления состояния.

Если бы я использовал избыточный поток, я мог бы использовать что-то вроде следующего 

componentDidMount() {
    this.props.getUserDetails().then(() => {
      this.setState({ user });
    });

}

, чтобы пользовательское состояние содержало все детали пользователя и, еслипользовательские свойства изменяются, тогда состояние может быть обновлено с помощью метода handleChange.

То есть, после вызова API мне нужно что-то вроде 

state  = {
   email: user@company.com,
   name: 'Ken'
}

Как добиться того же, используя сагу излишков?

...