Redux toolkit - How to redirect after form submit flow?

Question

I'm using redux toolkit (with that helper; https://github.com/thecodingmachine/redux-toolkit-wrapper)

I want to redirect user after form submit. But when I do this like below; It redirects user everytime when comes to page.

Because I couldn't create "reset success flow" with that architecture.

My main code:

....
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])

(When loading stops and if there's a data (billing.id) then redirect user)

My Store 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 file:

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',
  }),
}

@/Services/Address/Add file:

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
}

How can I handle this procedur? I need to make "return success and reset success" flow. But couldn resolve.

user_8690857 · Answer

I'm not familiar with that redux-toolkit-wrapper, but you've an async action creator so it implicitly returns a promise.

You can chain from it:

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

Or you can make submitForm also async and await it.

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

Redux toolkit - How to redirect after form submit flow?

1 Answers