Editing data in redux, but leaving some values unchanged - reactjs

Question

I have an Edit Form in which i can update an already existing element of specified ID.
Let's say im editing this character:
{
"name": "Walter White",
"birthday": "1963-01-07",
"img": "https://upload.wikimedia.org/wikipedia/en/0/03/Walter_White_S5B.png",
"status": "Alive",
"appereance": [1, 2, 3],
"id": 1
}
I want to change the name,birthday,image and status. And i already did that. But I want the apperance array to remain the same. Although, after updating the data, the apperance is being erased.
Does anyone know, what can I do so that the apperance array won't change?
My EditForm code:
const UserEditForm = () => {
let { id } = useParams();
const { user } = useSelector((state) => state.user);
const [state, setState] = useState({
name: "",
birthday: "",
img: "",
status: "",
// appereance: ?????
});
const [error, setError] = useState("");
let history = useHistory();
let dispatch = useDispatch();
const { name, birthday, img, status, apperance } = state;
useEffect(() => {
dispatch(getSingleUser(id));
}, []);
useEffect(() => {
if (user) {
setState({ ...user });
}
}, [user]);
const handleInputChange = (e) => {
let { name, value } = e.target;
setState({ ...state, [name]: value });
};
const handleSubmit = () => {
dispatch(updateUser(state, id));
history.push("/");
setError("");
};
return (
<div>
<Button
style={{ width: "100px", marginTop: "20px" }}
variant="contained"
color="secondary"
type="button"
onClick={() => history.push("/")}
>
Go Back
</Button>
<h2>Edit User</h2>
{error && <h3 style={{ color: "red" }}>{error}</h3>}
<form onSubmit={handleSubmit}>
<TextField
id="standard-basic"
label="Name"
value={name || ""}
name="name"
type="text"
required
onChange={handleInputChange}
/>
<br />
<TextField
id="standard-basic"
name="birthday"
value={birthday || ""}
type="date"
required
onChange={handleInputChange}
/>
<br />
<TextField
id="standard-basic"
label="img"
value={img || ""}
name="img"
type="url"
required
onChange={handleInputChange}
/>
<select
id="standard-basic"
label="status"
value={status || ""}
name="status"
onChange={handleInputChange}
>
<option value={""}>Brak informacji</option>
<option value={"Alive"}>Alive</option>
<option value={"Dead"}>Dead</option>
</select>
<Button
style={{ width: "100px" }}
variant="contained"
color="primary"
type="submit"
onChange={handleInputChange}
>
Update
</Button>
</form>
</div>
);
};
EDIT ADDED REDUCER
const fetchState = {
users: [],
user: {},
};
export const userReducer = (state = fetchState, { type, payload }) => {
switch (type) {
case USERS_FETCH:
return { ...state, users: payload };
case ADD_USER:
return { ...state, users: [...state.users, payload] };
case UPDATE_USER:
return { ...state, users: [...state.users, payload] };
case GET_SINGLE_USER:
return {
...state,
user: payload,
};
default:
return state;
}
};
export const selectedUserReducer = (state = {}, { type, payload }) => {
switch (type) {
case GET_USER:
return { ...state, ...payload };
default:
return state;
}
};

Answer 1

There might be another way to achieve the same result. I am posting mine.
You can alter your object in the reducer and store only the data which you want to.
eg:-
case UPDATE_USER: {
const updateState = {
...state.user.appearance,
name: payload.name,
birthday: payload.birthday,
img: payload.img,
status: payload.status,
id: payload.id
};
return {
...state,
updateState,
};
}
USER REDUCER
const fetchState = {
user: [
name: "",
birthday: "",
img: "",
status: "",
appereance: "",
]
}
Please try and let me know , cheers !