使用redux-saga重定向React路由器

Question

I have redux-saga which should redirect user to main page after successfully logging. I do not use react-router-redux or smth like that so my router is not connected to state.

Here is my Login component

const AdminLogin: React.FC<RouteComponentProps> = ({history}) => {
    const [form, setForm] = useState({username: '', password: ''});
    const user = useSelector(getAdminUser);
    const dispatch = useDispatch();
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        dispatch(makeLoginAsync(form));
    };

    useEffect(() => {
        if (user && user.token) {
            history.push('/admin/main'); // here it is
        }
    }, [user, history]);


    return (
        <form onSubmit={handleSubmit} className="admin-login">
            // FORM HTML CODE
        </form>
    );
};

export default withRouter(AdminLogin);

Notice I'm dispatching form to Action, then Saga is listening my Action and does all logic and effects. I thought it would be much better to do redirection in Saga code. But I couldn't?

After successful login, Reducer changes the state sets user auth token. If I have token, I take it as user is logged in and redirect him to another page.

As you see, I implement this logic directly in the component (using Selector). But I find it very ugly.

Actually, I can access history object only in component (if component is wrapped with withRouter ).

If I used react-router-redux , I could do something like

import { push } from 'react-router-redux'

and use push function to redirect from Saga. I'm new to React and I heard that it's not obligatory to connect router to redux. Also I don't want to make my application more complex and have another dependency to implement such basic feature as redirection.

So now I have to make it even more complex and implicitly. Maybe I have missed something?

Any help is welcome.

Answer 1

pass history with dispatch event and then use it to push route inside redux

const AdminLogin: React.FC<RouteComponentProps> = ({history}) => {
    const [form, setForm] = useState({username: '', password: ''});
    const user = useSelector(getAdminUser);
    const dispatch = useDispatch();
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        dispatch(makeLoginAsync({form,history}));
    };

    useEffect(() => {
        if (user && user.token) {
            history.push('/admin/main'); // here it is
        }
    }, [user, history]);


    return (
        <form onSubmit={handleSubmit} className="admin-login">
            // FORM HTML CODE
        </form>
    );
};

export default withRouter(AdminLogin);