做出反应。 Redux persist 发送两个相同的请求答案

【问题标题】：React. Redux persist sends two identical requests做出反应。 Redux persist 发送两个相同的请求
【发布时间】：2022-10-21 16:13:40
【问题描述】：

我正在使用 redux-persist 和 refux 工具包。我有一个依赖项，如果切片（RTK）发生变化，那么就会向服务器发出请求。如果没有持久化器，则应该有 1 个请求。但是当持久化器被连接时，两个相同的请求会同时进行。

这是我发送请求的效果：

  const {
    simpleOutgoingData,
  } = useTypedSelector(({ simpleMortgage }) => simpleMortgage)

  const { postSimpleMortgageCalc } = useActions()

  useEffect(() => {
    postSimpleMortgageCalc(simpleOutgoingData)
  }, [simpleOutgoingData])

这是切片

const simpleOutgoingData = createSlice({
  name: 'simpleOutgoingData',
  initialState: {
    target: 'payment',
    mortgageAmount: 500000,
    loanType: 'regular',
    interestRate: 1.6,
    amortizationMonths: 300,
    isIncludeAmortizationTable: true,
    rateTermMonths: 60,
    paymentFrequency: 'monthly',
    extraPayment: 0,
    annualPrepayment: 0,
    oneTimePrepayment: 0,
    rateType: 'variable',
    rateCompounding: 'semi-Annual',
  } as SimpleOutgoingDataType,
  reducers: {
    setSimpleOutgoingData: (
      state,
      { payload }: PayloadAction<SimpleOutgoingDataType>,
    ) => ({
      ...state,
      ...payload,
    }),
  },
  extraReducers: {
    [clearStore.type]: () => {},
  },
})

这是传奇

function* postSimpleMortgageCalc(
  action: ReturnType<typeof actions.postSimpleMortgageCalc>,
) {
  const { payload } = action

  yield put(actions.setIsLoading(true))

  try {
    const {
      data: { result },
    } = yield call(() => API.simpleMortgageCalc.post(payload))

    yield put(
      actions.setSimpleMortgageData({
        principalPayment: 0,
        interestPayment: 0,
        ...result,
      }),
    )
  } catch (e) {
    console.log(e)
  } finally {
    yield put(actions.setIsLoading(false))
  }
}

export function* watchSimpleMortgageSaga() {
  yield takeLatest(actions.postSimpleMortgageCalc.type, postSimpleMortgageCalc)
}

这是根传奇

export default function* RootSaga() {
  yield all([fork(watchSimpleMortgageSaga)])
}

这是根减速器

export default combineReducers({
  simpleMortgage: simpleMortgageReducer,
})

这是存储索引文件

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
}

const pReducer = persistReducer<StateType, any>(persistConfig, RootReducer)

const sagaMiddleware = saga()

const store = configureStore({
  reducer: pReducer,
  middleware: [
    ...getDefaultMiddleware({ thunk: false, serializableCheck: false }),
    sagaMiddleware,
  ],
  devTools: true,
})

sagaMiddleware.run(RootSaga)

export type RootState = ReturnType<typeof store.getState>

export default store

export const persistor = persistStore(store)

这是应用程序索引文件

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <React.StrictMode>
        <App domElement={1} />
      </React.StrictMode>
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
)

【问题讨论】：

标签： typescript react-redux redux-saga redux-toolkit redux-persist

【解决方案1】：

这是由于反应严格模式。禁用它，请求将只发送一次。

也检查一下： https://reactjs.org/docs/strict-mode.html

【讨论】：