店铺:

import { configureStore } from "@reduxjs/toolkit";

//SLICES
import mainLayoutReducer from "./mainLayoutSlice";
import userDataReducer from "./userDataSlice";
import schedulePeriodReducer from "./schedulePeriodSlice";
import loadingReducer from "./loadingSlice";
import draftDataSlice from "./draftDataSlice";

// API
import { tmsApi } from "../api";
import { daDataApi } from "../api/thirdPartyApis/daDataApi";

import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
};

const persistedMainLayoutReducer = persistReducer(
  persistConfig,
  mainLayoutReducer
);

const persistedDraftReducer = persistReducer(
  persistConfig,
  draftDataSlice
);

const persistedLoadingReducer = persistReducer(persistConfig, loadingReducer);

const store = configureStore({
  reducer: {
    // PERSISTED SLICES
    mainLayout: persistedMainLayoutReducer,
    loading: persistedLoadingReducer,
    draftData: persistedDraftReducer,
    // schedulePeriod: persistedSchedulePeriodReducer,

    // SLICES
    userData: userDataReducer,
    schedulePeriod: schedulePeriodReducer,

    // API
    [tmsApi.reducerPath]: tmsApi.reducer,
    [daDataApi.reducerPath]: daDataApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
      .concat(tmsApi.middleware)
      .concat(daDataApi.middleware),
});

export default store;

切片:

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  draftData: null,
};

export const draftDataSlice = createSlice({
  name: "draftData",
  initialState,
  reducers: {
    setDraftData: (state, action) => {
      state.draftData = action.payload;
    },
    clearDraftData: (state) => {
      state.draftData = null;
    },
  },
});

export const { setDraftData, clearDraftData } = draftDataSlice.actions;

export default draftDataSlice.reducer;

组件:

const isDraft = location.search;

const draftData = useSelector((state) => state.draftData.draftData);

const formik = useFormik({
  initialValues: isDraft
    ? draftData
    : {
      ...mainInfoValues(employeeInfo),
      ...vehicleInfoValues(employeeInfo),
      ...docsValues(employeeInfo),
    },
  onSubmit: // here onSubmit func
)}

useEffect(() => {
  dispatch(setDraftData(values));
}, [values]);

return(
  <form onSubmit={handleSubmit}>
    <Section overflow="inherit">
      {(() => {
        switch (step) {
          case 1:
            return (
              <MainInfo
                values={values}
                handleChange={handleChange}
                setFieldValue={setFieldValue}
                setValues={setValues}
                touched={touched}
                errors={errors}
                handleBlur={handleBlur}
                isStepOneEmpty={isStepOneEmpty}
                resetForm={resetForm}
                handleStep={handleStep}
              />
            );

          case 2:
            return (
              <VehicleInfo
                values={values}
                handleChange={handleChange}
                setFieldValue={setFieldValue}
                setValues={setValues}
                touched={touched}
                errors={errors}
                handleBlur={handleBlur}
                isStepTwoEmpty={isStepTwoEmpty}
                resetForm={resetForm}
                handleStep={handleStep}
              />
            );

          case 3:
            return (
              <AttachDocs
                values={values}
                handleChange={handleChange}
                setFieldValue={setFieldValue}
                setValues={setValues}
                touched={touched}
                errors={errors}
                handleBlur={handleBlur}
                isStepThreeEmpty={isStepThreeEmpty}
                resetForm={resetForm}
                handleStep={handleStep}
              />
            );

          default:
            break;
        }
      })()}
    </Section>
  </form>
)

我试图保存值从formik到持久切片，一切正常，直到重定向到另一个页面并刷新它.当我回来时，我的切片是空的，但如果用form刷新当前页面，一切正常，切片不是空的.

步骤:

1. 在形式上对值进行一些更改
2. 切片已满
3. 重定向到另一页
4. 刷新页
5. 返回页面
6. 切片为空