Question

我有一个用Formik呈现表单的小容器，此表单有一个去抖动的更改事件，该事件将通过操作触发redux-saga，并尝试从服务中获取快递建议。

我的减速器：

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);

一切都正确接线，或者看来，该传奇故事在我需要它运行时运行并调度通过化简器的更新，并且我可以在控制台中看到正确的有效负载。我最初的怀疑是我的异径管中有一个突变，我什至尝试使用浸入法得到相同的结果。有效负载正确通过了周期，但是存储没有更新。在我看来，更新周期如下：

目标输入已更新->组件重新渲染->标志动作分派-> saga正确完成并分派更新动作-> reducer获取新的有效负载并生成新的状态->组件不接收新状态。

我想补充一点，由于某些原因，传递给 handleSubmit 的值包含其他属于道具的数据，例如位置，历史记录等，这可能会污染提供者空间，但是我目前无法确认。

因此我的formikOptions上的这一行：

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

使用Sagas的reducer调用后，React-native，redux存储未更新

0 个答案: