Redux의 action

어니·2022년 11월 1일
0

TIL

목록 보기
3/16
post-thumbnail

Action

주문서 같은 개념이다.
만약 true 값을 false값으로 바꾼다던지, user.name을 '철수'에서 '길동'으로 바꿀 때 변경할 내용을 적는 곳이다.



// 초기 state
const initialState = {
    user : {
        isLoggedIn : false,
        user: null,
        signUpData: {},
        loginData: {},
    }
};
  • 로그인을 했을 때 state값을 true 하고, 로그아웃을 했을 때 false로 값이 변경되는 동작을 만들어 보자.

  • 주문서(action)을 만들어 주면 된다. 이 action또한 함수형으로 만들 수 있다!
export const loginAction = (data) => {
	return{
    	type: 'LOG_IN',
      	data,
    }
}

여기서 기억해야 할 2가지!
1. type은 action의 이름이다.
2. return문을 왜 {} 로 적는가?

return문을 왜 {} 로 적는가?

{} === {} 의 결과는 false로 나온다. 왜냐하면 같은 모양이더라도 각자 개인의 주소를 가지고 있기 때문이다. 모양이 같다고, 객체 안에 프로퍼티가 둘 다 없다고 해도 다르다!

redux는 github처럼 이전 코드를 다시 가져올 수 있다는 장점이 있다. 이전 코드들을 다시 불러 올 수가 있다. 배포를 하기 전 이전 코드와는 오류가 안나는지 확인해볼 수 있는 기회를 가질 수 있다.

만약

const a = {name : "코난"};
const b = a;

b.name = "미란"

으로 한다면 a.name도 '미란'으로 변할 것이다.
그러면 이전 코드가 어땠는지, 값이 무엇이었는지 알 수 없다. 그렇기 때문에 return문에 {} 넣어 이전 코드를 참조할 수 있도록 해주는 것이다.

const prev = {name : "코난"}
const next = {name : "미란"}

이렇게 해야 기록에 남는다.

그렇기 때문에 return문에 {}로 만드는 것이다.

profile
개린이

0개의 댓글