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.