React and useReducer unable to access the state value - reactjs

Question

relatively new to React so please excuse me for this question.
Below is a VERY basic form with a submission button and ability to listen for value changes on a users username and password.
The problem that I am facing is that as soon as I type anything into the form, it throws this error:
[![enter image description here][1]][1]
(image isn't uploading: TypeError: Cannot read property "requestInFlight" of undefined)
Apparently state is nowhere to be found. I feel that I have done this verbatim from tutorials and the [documentations][2] so not sure what is throwing me off here.
import React, { useContext, useEffect, useReducer } from "react";
import DispatchContext from "../DispatchContext";
// Boostrap Components
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
// Third party Components
import Axios from "axios";
const ACTIONS = {
UPDATE_USERNAME: "update-username",
UPDATE_PASSWORD: "update-password",
REQUEST: "request",
};
const initialState = {
username: "",
password: "",
requestInFlight: false,
};
function reducer(draft, { type, value }) {
switch (type) {
case ACTIONS.UPDATE_USERNAME:
draft.username = value;
return;
case ACTIONS.UPDATE_PASSWORD:
draft.password = value;
return;
case ACTIONS.REQUEST:
draft.requestInFlight = value;
return;
default:
return;
}
}
function FormComponent({ type }) {
const appDispatch = useContext(DispatchContext);
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
if (!state.requestInFlight) return;
dispatch({ type: ACTIONS.REQUEST, value: true });
const ourRequest = Axios.CancelToken.source();
async function sendRequest() {
try {
const response = await Axios.post(`/api/${type}`, {
username: state.username,
password: state.password,
});
console.log(response);
dispatch({ type: ACTIONS.REQUEST, value: false });
} catch (e) {
console.log(e);
dispatch({ type: ACTIONS.REQUEST, value: false });
}
}
sendRequest();
return () => ourRequest.cancel();
}, [state.requestInFlight]);
return (
<Form
onSubmit={(e) => {
e.preventDefault();
dispatch({ type: ACTIONS.REQUEST, value: true });
}}
>
<Form.Group controlId="formBasicEmail">
<Form.Label className="text-muted">Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter Username"
onChange={(e) =>
dispatch({ type: ACTIONS.UPDATE_USERNAME, value: e.target.value })
}
/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label className="text-muted">Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={(e) =>
dispatch({ type: ACTIONS.UPDATE_PASSWORD, value: e.target.value })
}
/>
</Form.Group>
<Button variant="primary" type="submit">
{type}
</Button>
</Form>
);
}
export default FormComponent;
[1]: https://i.stack.imgur.com/jD0sO.png
[2]: https://reactjs.org/docs/hooks-reference.html#usereducer

Answer 1

Your reducer setup is wrong, its returning undefined once it runs initially. You need to return your updated object instead of undefined.
function reducer(draft, { type, value }) {
switch (type) {
case ACTIONS.UPDATE_USERNAME:
return {...draft, username: value };
case ACTIONS.UPDATE_PASSWORD:
return {...draft, password: value };
case ACTIONS.REQUEST:
return {...draft, requestInFlight: value };
default:
return draft;
}
}

Answer 2

The first answer is the correct answer but there is something I need to point out from your implementation.
Reducer functions have to be pure!
why? I recommend reading this article: https://www.freecodecamp.org/news/why-redux-needs-reducers-to-be-pure-functions-d438c58ae468/