import { configureStore, createSlice } from '@reduxjs/toolkit';
const formSlice = createSlice({
name: 'form',
initialState: {
name: '',
dob: '',
},
reducers: {
setName: (state, action) => {
state.name = action.payload;
},
setDob: (state, action) => {
state.dob = action.payload;
},
},
});
export const { setName, setDob } = formSlice.actions;
const store = configureStore({
reducer: {
form: formSlice.reducer,
},
});
export default store;
type here
import React from 'react';
import { useSelector } from 'react-redux';
import ChildComponent from './ChildComponent';
import './ParentComponent.css';
const ParentComponent = () => {
const name = useSelector((state) => state.form.name);
const dob = useSelector((state) => state.form.dob);
return (
<div className="parent-container">
<div className="user-info">
{name && dob && (
<h1>
Welcome, {name}! Your date of birth is {dob}.
</h1>
)}
</div>
<div className="child-container">
<ChildComponent />
</div>
</div>
);
};
export default ParentComponent;
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setName, setDob } from '../store';
import './ChildComponent.css';
const ChildComponent = () => {
const dispatch = useDispatch();
const [name, setNameInput] = useState('');
const [dob, setDobInput] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
dispatch(setName(name));
dispatch(setDob(dob));
};
return (
<div className="child-form">
<form onSubmit={handleSubmit}>
<div>
<label>Name: </label>
<input
type="text"
value={name}
onChange={(e) => setNameInput(e.target.value)}
/>
</div>
<div>
<label>Date of Birth: </label>
<input
type="date"
value={dob}
onChange={(e) => setDobInput(e.target.value)}
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default ChildComponent;
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ParentComponent from './components/ParentComponent';
import './App.css';
const App = () => {
return (
<Provider store={store}>
<div className="app-container">
<ParentComponent />
</div>
</Provider>
);
};
export default App;
Initial State: The parent component’s user info div is visible but empty, with a fixed height to maintain the layout.
Submit Form in Child: After submitting the form, the parent component will display “Welcome, [name]! Your date of birth is [dob].” at the top.
State Persistence: The state (messages) will not persist after a refresh or a new load of the application, ensuring the messages are not visible when refreshed or the program is saved newly.
