есть ли способ получить обновленные данные состояния редукции с помощью того же метода onSubmit после отправки formik? - PullRequest
Новая
       129

есть ли способ получить обновленные данные состояния редукции с помощью того же метода onSubmit после отправки formik?

0 голосов
/ 16 июня 2020

В настоящее время я использую React , Redux Toolkit и Formik в моем текущем проекте, и ситуация такова, что пока я отправляю данные формы (используя useFormik ( ) hook) с помощью метода onSubmit; с помощью метода onSubmit я вызываю действие Redux (используя ловушку useDispatch ()), затем обращаюсь к данным состояния напрямую, используя ловушку useSlector, но я всегда получаю предыдущее значение. Примеры кодов приведены ниже: 

 const formik = useFormik({
    initialValues,
    onSubmit : (values) => {
      alert(JSON.stringify(values));
      dispatch(loginSumbmit(values));    
      console.log(authState); // get previous data
    },
    validationSchema,
  });

1 Ответ

0 голосов
/ 01 июля 2020

Большую часть времени вы делаете это в отношении Formik, чтобы проверить наличие ошибок валидации. Предполагая, что вы используете createAsyncThunk из Redux-Toolkit для loginSumbmit, вы можете получить полезную нагрузку сразу после и проверить ошибки / успех, выполнив следующие действия: 

const formik = useFormik({
    initialValues,
    onSubmit : async (values) => {
      const resultAction = await dispatch(loginSumbmit(values));
      if (loginSumbmit.fulfilled.match(resultAction)) {
        // it was a success, you can check resultAction.payload or use `unwrapResult`
      } else {
          // there was an error, handle it
      }

    },
    validationSchema,
  });

Другой вариант: 

const formik = useFormik({
    initialValues,
    onSubmit : values => dispatch(loginSumbmit(values))
    .then(unwrapResult)
    .then(originalPromiseResult => {
        // do something with the success payload
    })
    .catch(serializedError => {
        // do something with the error payload
    }),
    validationSchema,
  });

Здесь есть пример такого точного поведения в документации: https://redux-toolkit.js.org/api/createAsyncThunk#examples

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

...