Here is the solution I make ready for you

App.js

import "./styles.css";
import Tfield from "./Tfield";
import ButtonSubmit from "./ButtonSubmit";
import TypoValue from "./TyoValue";

import React, { useCallback, useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";

import { updateValue } from "./features/user";

export default function App() {
  const dataFromRedux = useSelector((state) => state.user.value);
  console.log(dataFromRedux);

  // useRef to prevent re-rendering
  const inputRef = React.useRef(undefined);

  const dispatch = useDispatch();
  const handleUpdate = () => {
    dispatch(updateValue(inputRef.current.value));
  };
  return (
    <div className="App">
      <Tfield inputRef={inputRef} />
      <ButtonSubmit handleUpdate={handleUpdate} />
      <TypoValue />
    </div>
  );
}

Tfield.js

import "./styles.css";
import * as React from "react";
import TextField from "@mui/material/TextField";

export default function Tfield({ inputRef }) {
  console.log("Textfield");

  return (
    <div>
      <TextField
        inputRef={inputRef} 
        label="Enter Name"
      />
    </div>
  );
}

BtnPage.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateValue } from "./features/Updater";

export default function BtnPage({handleUpdate}) {

  return (
    <div>
      <button onClick={() => handleUpdate()}> Update </button>
    </div>
  );
}

TFPage.js

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { updateValue } from "./features/Updater";

export default function TFPage({myTxt, setMyTxt}) {
  //const myData = useSelector((state) => state.update.value);

 // const [myTxt, setMyTxt] = useState(myData.text);

  //const dispatch = useDispatch();

  const handleChange = (char) => {
    setMyTxt(char);
    //dispatch(updateValue(myTxt));
  };

  // useEffect(() => {
  //   // console.log('useEff - render');
  //   dispatch(updateValue({ text: myTxt }));
  // }, [myTxt]);

  return (
    <div>
      <input
        value={myTxt}
        placeholder="Enter Some Text"
        onChange={(e) => handleChange(e.target.value)}
      />
    </div>
  );
}

ViewPage.js

import React from "react";
import { useSelector } from "react-redux";

export default function ViewPage() {
  const myData = useSelector((state) => state.update.value);
  console.log(myData);
  return (
    <div>
      <h1> {myData} </h1>
    </div>
  );
}

As per your Codesandbox link using redux Code.

I think you have to change from import updateValue from "./features/Updater"; to import { updateValue } from "./features/Updater";

And it works fine for me

Your current App.js file

import "./styles.css";
import TFPage from "./TFPage";
import BtnPage from "./BtnPage";
import ViewPage from "./ViewPage";
import { useSelector, useDispatch } from "react-redux";
import updateValue from "./features/Updater";
import { useState, React } from "react";

export default function App() {
  const myData = useSelector((state) => state.update.value);
  const [myTxt, setMyTxt] = useState(myData.text);

  const dispatch = useDispatch();
  const handleUpdate = () => {
    console.log(myData);
    dispatch(updateValue(myTxt));
  };

  return (
    <div className="App">
      <TFPage setMyTxt={setMyTxt} myTxt={myTxt} />
      <BtnPage handleUpdate={handleUpdate} />
      <ViewPage />
    </div>
  );
}

Your App.js file should look like below

import "./styles.css";
import TFPage from "./TFPage";
import BtnPage from "./BtnPage";
import ViewPage from "./ViewPage";
import { useSelector, useDispatch } from "react-redux";
import { updateValue } from "./features/Updater";
import { useState, React } from "react";

export default function App() {
  const myData = useSelector((state) => state.update.value);
  const [myTxt, setMyTxt] = useState(myData.text);

  const dispatch = useDispatch();
  const handleUpdate = () => {
    console.log(myData);
    console.log(myTxt);
    dispatch(updateValue(myTxt));
  };

  return (
    <div className="App">
      <TFPage setMyTxt={setMyTxt} myTxt={myTxt} />
      <BtnPage handleUpdate={handleUpdate} />
      <ViewPage />
    </div>
  );
}

You can also get a better understanding of the redux toolkit from this given doc Redux toolkit explaination for a better understanding

Your reducer has the following structure:

initialState: { value: { text: "" } }

But you are triggering an action like this:

dispatch(updateValue("youy text here"));

When it should be like this:

dispatch(updateValue({ text: "your text here" }));