在成功的cnrc操作后重定向的正确方法:将“history”作为参数传递给thunk VS有条件地< Redirect>使用Redux store?

wfypjpf4  于 2023-10-19  发布在  其他
关注(0)|答案(1)|浏览(81)

我已经学会了两种方法在使用Redux Thunk执行一个JavaScript操作后重定向到不同的页面:

1-方法:将“history”对象作为参数传递给BRAC操作。

在你的组件中,你用“useHistory”钩子定义了“history”对象,并把它传递给你的javascript操作:

function Register(){
    const history = useHistory()
    const dispatch = useDispatch()
    
    function registerHandler(){
        dispatch(registerAsync(registerForm, history))\
    }

    return (
        // JSX Code
        <button onClick={registerHandler}>Register</button> 
    )
}

然后,在你的push操作中,你可以使用“history.push()”来重定向:

export function registerAsync(data, history){
    return async function (dispatch) {
        try {
            const response = await Axios.Post('api/register/', data)
            history.push('/register_success')
        } catch (e) {
            dispatch(registerError(e))
        }
    }
}

2-方法:使用< Redirect >根据Redux存储值有条件渲染的组件:

在组件中,如果存储值为true,则有条件地返回:

function Register(){
    const dispatch = useDispatch()
    const registerSuccess = useSelector((store) => store.auth.registerSuccess)
    
    function registerHandler(){
        dispatch(registerAsync(registerForm, history))\
    }
    
    
    if (registerSuccess) {
        return <Redirect push to="/register_success"/>
    }

   return (
        // JSX Code
        <button onClick={registerHandler}>Register</button>
    )
}

在我们的Async动作中,我们调度了一个将“registerSuccess”设置为true的动作:

export function registerAsync(data){
    return async function (dispatch) {
        try {
            const response = await Axios.Post('api/register/', data)
            dispatch(registerSuccess())
        } catch (e) {
            dispatch(registerError(e))
        }
    }
}

减速器:

case actionTypes.REGISTER_SUCCESS:
            newState.registerSuccess = true
            return newState

有谁知道这两种方法中哪一种是正确的,为什么?
多谢了!

7dl7o3gd

7dl7o3gd1#

如果您使用的是react-router-dom v6,那么您应该使用useNavigate而不是useHistory,如本例所示
https://stackoverflow.com/a/63921034/13218213
虽然我通过将navigate函数传递给处理程序(在我的示例中,我将其传递给了navigate函数)找到了一个很好的解决方案,

MyComponent.tsx

import {useNavigate} from 'react-router-dom';
import {useAppDispatch, actions } from 'store';

const MyComponent = () => {
    
const navigate = useNavigate();
const dispatch = useAppDispatch();

const handleConfirm = () => {
    dispatch(actions.slice.asyncActionFunction(navigate));
      };

return <></>
};

然后,在“Thunk”(或“Thunk”)中,我这样做了

async-actions.ts

import { NavigateFunction } from 'react-router-dom';

export function asyncActionFunction(navigate: NavigateFunction) {
  return async (dispatch: AppDispatch, getState: () => RootState) => {
 
   try{
    /**
    * you can now use navigate(to:string; options: {}) as following
    */
        navigate('/destination');
    } catch (e) {
      console.error(e);

    }
  };
}

相关问题