React-native, магазин приставок не обновляется после вызова редуктора с помощью sagas - PullRequest
Новая
       39

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

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

У меня есть небольшой контейнер, который отображает форму с помощью Formik, в этой форме есть отклоненное событие изменения, которое вызовет избыточную сагу через действие и попытается получить предложение курьера из службы.

myредуктор: 

const reducer = (state = initialState, { type, payload }) =>  {
  if(type === CURIER_SUGGESTION){
    const { curier } = payload;
    console.log('the goods', curier);

    return {
      ...state,
      curier,
    };
  }

  return state;
};

Моя сага: 

function* guessCurier({ payload }){
  try{
    const { trackingNumber } = payload;
    const [data] = yield call(detectCourier, trackingNumber);

    yield put(setCurierSuggestion(data));
  }catch(error){
    yield call(console.log, error.message);
  }
}

и, наконец, моя форма: 

const BasicForm = ({
  dispatch,
  values,
  errors,
  history,
  handleChange,
  handleSubmit,
  suggestions,
}) => {
  const debouncedRequest = debounce(byTrackingNumber => {
    dispatch(detectCurier(byTrackingNumber));
  }, 250);

  const findSuggestions = value => {
    debouncedRequest(value);

    handleChange('trackingNumber')(value);
  };

  const CancelButton = (
    <Button
      label="Cancel"
      color="#000000"
      onPress={history.goBack}
    />
  );

  const SaveButton = (
    <Button
      label="Save"
      color="#000000"
      onPress={handleSubmit}
    />
  );

  return (
    <Page
      title="New Tracking"
      left={CancelButton}
      right={SaveButton}
    >
      <Container>
        <FormField
          label="Description"
          value={values.description}
          error={errors.description}
          placeholder="Xbox One Console"
          onChangeText={handleChange('description')}
        />
        <FormField
          label="Tracking #"
          placeholder="000000000"
          error={errors.trackingNumber}
          value={values.trackingNumber}
          onChangeText={findSuggestions}
        />
        <FormField
          label="Curier"
          placeholder="FedEx"
          error={errors.curier}
          value={values.curier}
          defaultValue={suggestions.curier.name}
          onChangeText={handleChange('curier')}
        />
      </Container>
    </Page>
  );
};

const options = {
  displayName: 'New Tracking',
  initialValues: {
    curier: '',
    description: '',
    trackingNumber: '',
  },
  handleSubmit: (rawData, { props }) => {
    const key = hat();
    const status = 'InformationReceived';
    const {
      description, trackingNumber, curier,
    } = rawData;

    const data = {
      key,
      status,
      curier,
      description,
      trackingNumber,
    };

    props.dispatch(addTracking(data));
    props.history.push(`/tracking/${trackingNumber}`, data);
  },
};

const NewTracking = withFormik(options)(BasicForm);
const mapStateToProps = state => {
  console.log('current state', state);

  return {
    suggestions: state.suggestions,
  };
};

export default connect(mapStateToProps)(NewTracking);

Все подключено правильно, или, кажется, сагазапускается, когда мне нужно, чтобы запустить и отправляет обновление, которое проходит через редуктор, и я вижу правильную полезную нагрузку в консоли.Сначала я подозревал, что в моем редукторе произошла мутация, и я даже пытался использовать immer с теми же результатами.Полезная нагрузка проходит цикл правильно, но магазин не обновляется.По моим наблюдениям, цикл обновления выглядит следующим образом:

целевой ввод обновляется -> повторный рендеринг компонента -> флаг действия диспетчеризации -> сага завершается правильно и отправляет действие обновления -> редукторполучает новую полезную нагрузку и генерирует новое состояние -> Компонент НЕ получает новое состояние.

Я хотел бы добавить, что по какой-то причине значения, передаваемые в handleSubmit , содержали другие данные, которые принадлежалив реквизитах, таких как местоположение, история и другие, это может быть загрязнение пространства провайдера, но я не могу подтвердить это в данный момент.

, таким образом, эта строка в моем formikOptions: 

const {
  description, trackingNumber, curier,
} = rawData;
...