[React] Redux(리덕스) 개념잡기

Redux란?

-리액트에서 상태 관리를 효율적으로 하기 위해 만들어진 상태 관리 라이브러리

-상태 관리를 컴포넌트 밖에서 처리하게 됨

 

 

1. 액션(action)

{
  type:"TOGGLE_VALUE"
  //그 외 필요한 값
}

-type값은 필수적임

-어떤 값을 업데이트할 때 어떻게 업데이트할지 정보를 지니고 있는 객체

 

 

2. Action Creater

export function addTodo(data){
return{
	type:"ADD_TODO",
        data
      };
}
//화살표 함수로도 만들 수 있음
export function addTodo=data=>({
	type:"ADD_TODO",
        data
});

-액션 객체 생성 (필수적은 아님)

 

 

3. Reducer

function reducer(state, action){
	switch(action.type):
    	case 'INCREASE': 
    		return state+1;
    	case 'DECREASE': 
    		return state-1;
	default: 
    		return state;
}

- 상태 변화를 일으키는 함수

-state, action을 parameter로 받아오고 state 값을 업데이트함

 

 

4. 스토어(Store)

-한 어플 당 하나의 스토어를 만들게 됨

-현재 앱의 상태와 리듀서가 포함되어있음

 

 

5. 디스패치(dispatch)

dispatch({type:'INCREASE'})

-발생한 션을 스토어에 전달

-액션이 Reducer에 전달돼서 Reducer가 새로운 state을 반환하고 스토어의 state가 바뀜

 

 

6. 구독(subscribe)

-subscribe함수를 호출할 때 특정 함수를 파라미터로 받아오면 액션이 dispatch 될 때마다 우리가 설정한 함수가 호출됨

-store의 상태가 업데이트될 때마다 함수 호출 가능

 

 

<리덕스의 3가지 규칙>

1. 하나의 어플리케이션엔 하나의 스토어가 있다.

  -스토어를 여러 개 만들어도 되지만 절대 권장하지 않음. 대신 리듀서는 여러개 만들어도 괜찮음

 

2. 상태는 읽기 전용(read-only)->불변성을 지켜줘야 한다.

  -state값을 절대 직접 수정해서는 안된다.

  -이전의 상태는 절대 변경하지 않고 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다.

 

3. 변화를 일으키는 함수 Reducer는 순수한 함수여야 한다.

  -동일한 인풋->동일한 아웃풋

  ex) Date, random 같은 값이 바뀌는 함수는 쓸 수 없음

 

 

*벨로퍼트의 모던 리액트 강좌를 보고 작성했습니다.