React rails authentication - Get user state without page reload - ruby-on-rails

Question

I'm building a SPA with rails API on the back-end and React on the front-end. The user authentication works as desired and I'm getting the user state from the rails. The problem is that when a user signs in to the app, I have to manually refresh the whole browser to update the state.
// App.js
function userReducer(state, action) {
switch (action.type) {
case "success": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
logged_in: action.status,
error: ""
};
}
case "fail": {
return {
...state,
id: "",
username: "",
email: "",
logged_in: false,
error: action.error
};
}
default:
return state;
}
}
// set initial state of the logged in user
const intialUserState = {
id: "",
username: "",
email: "",
logged_in: false,
error: ""
};
export const UserStatus = React.createContext(intialUserState);
function App() {
const [userState, dispatch] = useReducer(userReducer, intialUserState);
// fetch the user's data
function fetchLoggedInUserData() {
axios
.get("http://localhost:3000/api/v1/logged_in", { withCredential: true })
.then(response => {
const { id, username, email, logged_in } = response.data;
if (response.status === 200) {
dispatch({
type: "success",
id: id,
username: username,
email: email,
status: logged_in
});
}
})
.catch(error => {
dispatch({ type: "fail", error: error });
});
}
// when the app loads, check if the user is signed in or not.
// if the user is signed in, then store the user's data into the state
useEffect(() => {
fetchLoggedInUserData();
}, []);
return (
<UserStatus.Provider value={{ userState, dispatch }}>
<Router>
<>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/" render={props => <Public {...props} />} />
</Switch>
</>
</Router>
</UserStatus.Provider>
);
}
The above code works as expected and I can store the user state as you see from the code. The problem is when a user clicks on the submit button I want to automatically store the user without having to refresh the page. The code below is from Login.js
// Login.js
function signinReducer(state, action) {
switch (action.type) {
case "field": {
return {
...state,
[action.field]: action.value
};
}
case "signin": {
return {
...state,
error: "",
isLoading: true
};
}
case "success": {
return {
...state,
error: "",
isLoading: false
};
}
case "error": {
return {
...state,
isLoading: false,
error: action.error
};
}
}
}
const initialState = {
username: "",
password: "",
isLoading: false,
error: ""
};
function FormMain() {
const [signinState, dispatch] = useReducer(signinReducer, initialState);
const { username, password, isLoading, error } = signinState;
const handleSubmit = async e => {
e.preventDefault();
dispatch({ type: "signin" });
await postUserData();
};
function postUserData() {
axios
.post(
"http://localhost:3000/api/v1/sessions",
{
user: {
username: username,
password: password
}
},
{ withCredentials: true }
)
.then(response => {
if (response.status === 200) {
dispatch({ type: "success" });
}
})
.catch(error => {
// dispatch({ type: "error", error: error.response.data[0] });
});
}
}
I have removed the sign-in form from the code above as it was getting too lengthy.
The solution can be to somehow transfer the state from the Login.js to App.js or directly update the state of the App.js from the Login.js and make use of the useEffect in the App.js, and update the state without having to manually refresh the browser but I do not know how to do that.

Answer 1

The problem is fixed by creating a new case to App.js and updating that case from Login.js.
// App.js
function userReducer(state, action) {
switch (action.type) {
case "success": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
admin: action.admin,
logged_in: action.status,
error: ""
};
}
case "fail": {
return {
...state,
id: "",
username: "",
email: "",
admin: false,
logged_in: false,
error: action.error
};
}
case "globalFetch": {
return {
...state,
id: action.id,
username: action.username,
email: action.email,
admin: action.admin,
logged_in: action.status,
error: ""
};
}
default:
return state;
}
}
As you can see the globalFetch case can be easily passed down to the Login.js via useContext and then update the case as per your requirement.
// Login.js
function postUserData() {
axios
.post(
"http://localhost:3000/api/v1/sessions",
{
user: {
username: username,
password: password
}
},
{ withCredentials: true }
)
.then(response => {
if (response.status === 200) {
const { id, username, email, logged_in, admin } = response.data;
dispatch({ type: "success" });
state.dispatch({
type: "globalFetch",
id: id,
username: username,
email: email,
admin: admin,
status: logged_in
});
}
})
.catch(error => {
// dispatch({ type: "error", error: error.response.data[0] });
});
}
// More code...
}