时间戳

首页 > 解决方案 > Redux 工具包 - 如何在表单提交流程后重定向？

reactjs - Redux 工具包 - 如何在表单提交流程后重定向？

问题描述

我正在使用 redux 工具包（使用那个助手；https://github.com/thecodingmachine/redux-toolkit-wrapper）

我想在表单提交后重定向用户。但是当我像下面这样做时；每次访问页面时都会重定向用户。

因为我无法使用该架构创建“重置成功流程”。

我的主要代码：

....
import AddBilling from '@/Store/Address/AddBilling'
....
  const billing = useSelector((state) => state.address.billing)
  const loading = useSelector((state) => state.address.BillingAddress.loading)
  const submitForm = (e) => {
    dispatch(AddBilling.action(formData))
  }
  useEffect(() => {
    if(!loading&&billing.id){
      //making redirect action here
    }
  }, [loading, billing])

（当加载停止并且如果有数据（billing.id）然后重定向用户）

我的商店 index.js

import { combineReducers } from 'redux'
import {
  persistReducer,
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import { configureStore } from '@reduxjs/toolkit'
import storage from 'redux-persist/lib/storage';

import user from './Auth'
import address from './Address'
import common from './Common'
import cart from './Cart'
import favorite from './Favorite'

const reducers = combineReducers({
  user,
  address,
  common,
  cart,
  favorite,
})

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, reducers)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    const middlewares = getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
      immutableCheck: false,
      isSerializable: false,
    })
    return middlewares
  },
})

const persistor = persistStore(store)

export { store, persistor }

@/Store/Address/AddBilling 文件：

import {
  buildAsyncState,
  buildAsyncReducers,
  buildAsyncActions,
} from '@thecodingmachine/redux-toolkit-wrapper'
import BillingAddress from '@/Services/Address/Add'

export default {
  initialState: buildAsyncState('BillingAddress'),
  action: buildAsyncActions('auth/BillingAddress', BillingAddress),
  reducers: buildAsyncReducers({
    itemKey: 'billing',
    errorKey: 'BillingAddress.error', // Optionally, if you scoped variables, you can use a key with dot notation
    loadingKey: 'BillingAddress.loading',
  }),
}

@/服务/地址/添加文件：

import api, { handleError, setClientToken } from '@/Services'

export default async (data, is_billing = null) => {
  if(is_billing){
    return data
  }
  const response = await api.post('address/add', data)
  .catch((err) => {
    return handleError({ message: err.data.message })
  })
  
  return response.data.data
}

我该如何处理这个程序？我需要制作“返回成功并重置成功”流程。但解决不了。

标签： reactjsreduxredux-toolkit

解决方案

我不熟悉那个 redux-toolkit-wrapper，但你有一个async动作创建者，所以它隐含地返回一个承诺。

您可以从中链接：

const submitForm = (e) => {
  e.preventDefault();
  dispatch(AddBilling.action(formData))
    .then(() => {
      // handle imperative redirect here
    });
};

或者你也可以制作submitForm并async等待它。

const submitForm = async (e) => {
  e.preventDefault();
  await dispatch(AddBilling.action(formData));
  // handle imperative redirect here
}

推荐阅读