Search code examples
reactjsreact-reduxredux-saga

Redux-saga: dispatch does not trigger saga sometimes


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


Solution

  • 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);
      }
    }