How to implement Redux Slicer - reactjs

Question

Hello I am working on a Registration app, I was using useState hook to set the user information
and this way it works fine
import React, { useState } from 'react';
import axios from 'axios';
const Registration = (props) => {
const [user, setUser] = useState({
email: '',
password: '',
password_confirmation: '',
});
const { email, password, password_confirmation } = user;
const handlChange = (event) => {
setUser({ ...user, [event.target.name]: event.target.value });
};
const handleSubmit = (event) => {
axios
.post(
'http://localhost:3001/registrations',
{
user: {
email: email,
password: password,
password_confirmation: 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;
now the issue is that I have to use Redux to manage the state ,so created a slicer
here is my slicer ,
the problem i have is that i don't know how to connect redux to my registration component,
for example I am assuming that the information provided in the form is the payload so i will be passing it to my reducer as the action.payload and i think i am setting the state with the information from the payload.
import { createSlice } from '#reduxjs/toolkit';
const initialState = {
email: '',
password: '',
password_confirmation: '',
};
const registrationSlice = createSlice({
name: 'registration',
initialState,
reducers: {
setUsers: (state, action) => {
const { email, password, password_confirmation } = action.payload;
state = {
email,
password,
password_confirmation,
};
},
},
});
export const { setUsers } = registrationSlice.actions;
export default registrationSlice.reducer;
the problem is how do i connect this to my component, I read in the Redux Toolkit website I have to use dispatch and useSelector,
so that is what i think i am doing here but is not working,
I am stuck at this point and don't know how to solve it. Can someone please help me understand how to fix it and make it work.
import React, { useState } from 'react';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { setUsers } from '../../features/user/registrationSlice';
const Registration = (props) => {
const dispatch = useDispatch();
const user = useSelector((state) => state.user);
// const { email, password, password_confirmation } = user;
const handlChange = (event) => {
dispatch(setUsers({ [event.target.name]: event.target.value }));
};
const handleSubmit = (event) => {
axios
.post(
'http://localhost:3001/registrations',
{
user: {
email: email,
password: password,
password_confirmation: 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;

Answer 1

Issue
The issue here is that your reducer case is expecting a "full set" of state properties to update all at once but the UI is dispatching actions for each sub-state individually.
Solution
I suggest updating the reducer, or rather, add a new reducer to handle setting individual state properties. This leaves the possibility to set the entire state if you want.
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;
},
},
});
And dispatch the new setUserProperty action.
const handlChange = (event) => {
dispatch(setUserProperty({
name: event.target.name,
value: event.target.value,
}));
};
Since you are using Redux-toolkit you may want to eventually consider moving all the asynchronous axios POST request logic into a thunk via the createAsyncThunk. The thunk will have access to the store to get the user values and make the asynchronous calls. This will allow you to further decouple the Registration component from auth/registration logic and your redux state.