آموزش Redux Toolkit در ReactJS

				
					import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { addUser, deleteUser, updateUsername } from "./features/Users";

function App() {
  const dispatch = useDispatch();
  const userList = useSelector((state) => state.users.value);

  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [newUsername, setNewUsername] = useState("");

  //console.log(userList);
  return (
    <>
      <div className="p-10">
        <h1 className="font-semibold text-gray-50">
          Work With Redux Toolkit in ReactJS | Payam Hayati
        </h1>
        <hr className="mt-2" />

        {/* Make user */}
        <div className="py-2">
          <input
            type="text"
            placeholder="Name..."
            onChange={(e) => {
              setName(e.target.value);
            }}
          />
          <input
            type="text"
            placeholder="Username..."
            className="ml-2"
            onChange={(e) => {
              setUsername(e.target.value);
            }}
          />
          <button
            className="ml-2"
            onClick={() => {
              dispatch(
                addUser({
                  id: userList[userList.length - 1].id + 1,
                  name,
                  username,
                })
              );
              //dispatch(addUser({ id: 0, name: name, username: username }));
            }}
          >
            Add User
          </button>
        </div>

        {/* Read information from store */}
        <div>
          {userList.map((usr) => {
            return (
              <div className="p-2 mt-2 rounded-md bg-cyan-700 text-gray-50">
                <span className="font-semibold">Name: </span>
                <span> {usr.name} | </span>
                <span className="font-semibold">Username: </span>
                <span>{usr.username}</span>

                <button
                  onClick={() => {
                    dispatch(deleteUser({ id: usr.id }));
                  }}
                  className="ml-4"
                >
                  Delete
                </button>
                {/* Update Process */}
                <div className="mt-2">
                  <input
                    type="text"
                    placeholder="New Username..."
                    onChange={(e) => {
                      setNewUsername(e.target.value);
                    }}
                  />
                  <button
                    onClick={() =>
                      dispatch(
                        updateUsername({ id: usr.id, username: newUsername })
                      )
                    }
                    className="ml-4"
                  >
                    Update
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default App;