Redux

 

오늘은 리덕스에 대해서 본격적으로 배워봤다.

node => express처럼 오히려 구현하기 쉬웠을거라고 생각했는데 리덕스가 어려운 개념이더라

그렇다고 대충 넘어간다면?진짜 분명 부메랑을 쳐맞게될것이야..

어려울수록 천천히 기본기를 다져보자

Redux를 쓰는 이유

1. props가 귀찮을때 사용한다.

2. state변경 관리할 떄 사용한다.

 

상태에 변화가 필요하면? 액션!!!이 필요

 

Action? : type과 필요한 데이터(액션)을 담은 객체

 

type은 필수다!

 

{
type : "ADD_TODO" // 예시를 살펴보니 타입 : 대문자로 써준다.
data : {
	id : 0,
    text : "봄바 꼬몽 씻기고 리덕스공부"
}

}

Action Creator : 액션함수

export function addTodo(data){
	return // 리턴값에 액션 넣어주기
    {type : "ADD_TODO",
     data : {
     	id : 0,
        text : "봄바 꼬몽 씻기고 리덕스공부"
     }
    }}
    
 //화살표 함수
 export const addTodo(data)=> {
 	//액션넣어주기
 }

 

Reducer : 변화함수

 

리듀서 두가지의 파라미터가 필요하다.  : state(현재상태) , action(전달받은액션)

현재의 상태와 액션을 참조하여 새로운 상태를 반환

 

function counter(state,action){ //counter ===reducer 함수이름이다.
	switch(action.type){
    case : 'Increase' :
    return state+1;
    case : 'Decrease' :
    return state-1
    default : 
    return state
     }
}

default : return state는 에러처리를 위함이다.

 

Store 스토어

 

앱상태(state) + 리듀서 + 몇가지 다른함수들

 

Dispatch 디스패치

 

스토어의 내장함수, 액션을 실행시키는 함수, dispatch(action) 이런식으로 사용한다. 

 

상태는 읽기전용이다.

 

이전에 리액트에서 학습했었듯이, 상태는 읽기전용이다. 그러므로 리덕스를 사용할때도 복사를 해야한다.

배열을 복사하여 push, concat을 했듯이, 객체도 복사를 해줘야한다.

Object.assign 을 사용하거나 spread 연산자 (...) 를 사용