Redux-saga: dispatch does not trigger saga sometimes

user_6225969 0
Viewed 208

I have two pages named Login and Welcome. I noticed that I cant run dispatch before login. To be more understandable I leave an example below;

On Login Page dispatch(fetchUser())) doesn't trigger saga Login Page =>

const fetchUserLocal = () => {
        console.log("dispatch run, before user login: ",dispatch(fetchUser()))
        dispatch(fetchUser())
           
    }
return ( <div> <button onClick={fetchUserLocal}>Click to FETCH USER</button> </div>)

On Welcome Page dispatch(fetchUser())) trigger the saga (The page can be accessible after logging in) Welcome Page =>

const fetchUserLocal = () => {
        console.log("dispatch run,  after user login: ",dispatch(fetchUser()))
            dispatch(fetchUser())
    }
 return ( <div> <button onClick={fetchUserLocal}>Click to FETCH USER</button> </div>)

Both pages have useDispatch and action and I can reach on these pages. According to your request I can add more information, thanks for help

redux-saga react-redux reactjs
2 Answers

I figure out the problem, It's all my mistake.

Welcome page is working because when fetchUser in that page I have a session, and my backend API return success and the code runs in the try block.

But I don't have any session when I fetch the user on Login page, and backend API returns credential error, and code runs in catch. The problem start here because I have missed parantesies. It works now well when I change yield put(fetchUserFailure) to yield put(fetchUserFailure())

export function* fetchUser() {
  try {
    console.log("fetchUser")
    const user = yield axios.get(FETCH_USER, { withCredentials: true });
    console.log("saga outh user",user)
    yield put(fetchUserSuccessful(user.data));
  } catch (error) {
    console.log("error",error)
    yield put(fetchUserFailure);
  }
}
user_62259690

I was using a helper package for actions and reducers. The package name is react-act. I don't know why but when I removed this package I didn't get the same error. Everything is okay now.

If I learn the what I did wrong with react-act I will leave a comment here, if you already know or have a guess, please leave a comment.

user_62259690
Related