Form submission with redux-saga

Question

I have a react app. Firebase on the backend. Redux-saga for state management. But my dispatch on form submit executes only once on initial render of UserForm comopnent. I have a submit handler:

 const formSubmitHandler = e => {
    e.preventDefault();
    dispatch({ type: 'REGISTER_USER', email, password });
  }

I have my saga

export function* registerUserHandler({email, password}) {
  try {
    const user = yield call(apiRequests.registerUser(email, password));
    yield put({ type: 'REG_USER', user })
  } catch(e) {
    console.log(e)
  }
} 

export function* registerNewWatcher() {
  yield takeLatest('REGISTER_USER', registerUserHandler);
}

This is giving me undefined for email and password. More correctly, cannot destructure from undefined. What will I passto registerUserHandler in the watcher saga?

The error in this saga also causes other sagas in my rootSaga to fail.

root saga

export default function* rootSaga() {
  yield all([
    // fork(fetchUserHandler),
    fork(registerUserHandler)
  ]) 
}

Answer 1

try this, I think u got the error because you are using the wrong syntax.

 const formSubmitHandler = e => {
    e.preventDefault();
    const params = { email, password }
    dispatch({ type: 'REGISTER_USER', params });
  } 

Answer 2

In case somone stumbles into this question it turns out it is the matter of how you pass arguments to the apiRequest function. You will not say:

const user = yield call(apiRequests.registerUser(email, password));

It is not necessary to use the call effect, although it is possible as seen in solution 2.

Solution 1

const user = yield apiRequests.registerUser(email, password));

Solution 2

 const user = yield call(apiRequests.registerUser, email, password);