Блог

Я узнал о 2 способах перенаправления на другую страницу после выполнения асинхронного действия с помощью Redux Thunk:

1-Метод: передача объекта «история» в асинхронное действие в качестве аргумента.

В вашем компоненте вы определяете объект «history» с помощью хука «useHistory» и передаете его своему асинхронному действию:

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

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

Затем в вашем асинхронном действии вы можете использовать «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>
    )
}
 

И внутри нашего асинхронного действия мы отправляем действие, которое устанавливает для «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
 

Кто-нибудь знает, какой из 2 методов является правильным и почему?

Большое спасибо!