I am trying to move the asynchronous Axios POST request logic from my registration component into a thunk via the createAsyncThunk.
Here is my registration component
import React from 'react';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { setUserProperty } from '../../features/user/registrationSlice';
const Registration = (props) => {
const dispatch = useDispatch();
const user = useSelector((state) => state);
const { email, password, password_confirmation } = user;
const handlChange = (event) => {
dispatch(
setUserProperty({
name: event.target.name,
value: event.target.value,
}),
);
};
const handleSubmit = (event) => {
axios
.post(
'http://localhost:3001/registrations',
{
user: {
email,
password,
password_confirmation,
},
},
{ withCredentials: true },
)
.then((response) => {
if (response.data.status === 'created') {
props.handleSuccessfulAuth(response.data);
}
})
.catch((error) => {
console.log('registration error', error);
});
event.preventDefault();
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Email"
value={email}
onChange={handlChange}
required
/>
<input
type="password"
name="password"
placeholder="Password"
value={password}
onChange={handlChange}
required
/>
<input
type="password"
name="password_confirmation"
placeholder="Confirm Password"
value={password_confirmation}
onChange={handlChange}
required
/>
<button tupe="submit">Register</button>
</form>
</div>
);
};
export default Registration;
and here is what I was able to come up using documentation from the createAsyncThunk
import axios from 'axios';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const getUsers = createAsyncThunk('registration/getUsers', async () => {
return axios
.post(
'http://localhost:3001/registrations',
{
user: {
email,
password,
password_confirmation,
},
},
{ withCredentials: true },
)
.then((response) => {
if (response.data.status === 'created') {
return response.data;
}
});
});
const initialState = {
user: {
email: '',
password: '',
password_confirmation: '',
},
loading: false,
error: null,
};
const registrationSlice = createSlice({
name: 'registration',
initialState,
reducers: {
setUsers: (state, action) => {
const { email, password, password_confirmation } = action.payload;
state = {
email,
password,
password_confirmation,
};
},
setUserProperty: (state, action) => {
const { name, value } = action.payload;
state[name] = value;
},
extrareducers: {
[getUsers.pending]: (state, action) => {
state.loading = true;
},
[getUsers.fulfilled]: (state, action) => {
state.user = action.payload;
state.loading = false;
},
[getUsers.rejected]: (state, action) => {
state.error = action.error.message;
state.loading = false;
},
},
},
});
export const { setUsers, setUserProperty, getUsers } =
registrationSlice.actions;
export default registrationSlice.reducer;
but anytime I run it I keep on getting errors, for example, I get the error that the email, password, and password_confirmation is not defined when I make the call inside the getUsers function, I understand why and is because I am not pulling the information from the user like I have I available in my registration component, but I have no clue as to how to fix it or make it work. I want to understand how to fix the problem.
