인프런 커뮤니티 질문&답변

안녕하세요 Redux 수업 다 듣고 이해 되지 않아서 따로 프로젝트를 뽑아서 Redux를 연습 하고 있어요...

일단 이해는 다된거 같아요...

아래 dispatch 하는 부분에서 오류가 뜨네요..

먼저 처리 순서가 ... input에 데이터를 입력하고 로그인 버튼을 클릭하고 다시 input에 데이터를 입력하면 오류가 뜨네요

cannot assign to read only property 'current' of object '# object '

버튼 클릭하는 부분에 dispatch하는 내용을 넣었구요..

구글에는 깊은 복사 뭐 이런거 있던데 그거랑 관련 없는거 같구...

===================================

리듀스 기본을 알면 저 문제 해결될꺼라는 어떤분의 답변이 야속하네요 ...

코드 시작

=============================

import { useState } from "react";
import { useDispatch } from "react-redux";
import {login} from "../slices/loginSlice"

const initState = {
    email:'',
    password:''
}

function LoginComponent(props) {

    const [loginParam, setLoginParam] = useState({...initState})

    const disPatch = useDispatch()

    const handleChange = (e)=> {
        loginParam[e.target.name] = e.target.value
        setLoginParam({...loginParam})
    }

    const handleLoginClick = (e)=>{
        console.log(".......")
        disPatch (
            login(loginParam)
        )
    }

    const handleLogoutClick = (e)=>{
        disPatch(
            login(initState)
        )
    }

    return (
        <div>
            <div className="flex flex=nowrap gap-x-8 place-content-center ">
                <div>
                    <div> login </div>
                    <div>
                        <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md" 
                        name="email" type ={'text'} value={loginParam.email} onChange ={handleChange}>
                        </input>
                    </div>
                    <div>
                        <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md"
                        name="password" type={'password'} value={loginParam.password} onChange={handleChange}
                        >
                        </input>
                    </div>
                    <div>
                        <button className = "rounded p-4 w-36 bg-blue-500 text-xl text-white"
                         onClick={handleLoginClick}
                        >
                            Login..
                        </button>
                    </div>
                </div>
                <button onClick={handleLogoutClick}>
                    logout
                </button>
            </div>
        </div>
    )
}

export default LoginComponent;

=============================