[Redux] Redux 개념과 3가지 규칙

가장 많이 사용하는 리액트 상태관리 라이브러리이다

컴포넌트 상태 업데이트 로직을 별도의 파일로 분리하여 효율적으로 관리할 수 있다 

 

Redux 구성요소

1) 액션 

상태에 변화가 필요할 경우 액션이 발생한다. 객체 형태로 전달하며 type필드는 반드시 필요하다

밑의 payload라고 써진 부분은 원하는 데이터 아무거나 넣어줘도 되고 필드명도 원하는대로 지정해서 쓰면 된다.

 

{type:'INCREASE', payload}
{type:'INCREASE', data:2}

2) 액션생성함수 

액션 객체를 만들어주는 함수이다 

function increateNumber(data){ // 액션 객체를 만들어서 반환해주는 액션 생성 함수
	return{
    type:'INCREASE',
    data
    };
}
    

변화를 일으킬 때마다 액션 객체를 만들어줘야 하는데, 매번 새로운 객체를 만들 필요 없이 함수로 만들면 재사용할 수 있다

 

3) 리듀서

store에 접근해서 상태 변화를 일으키는 함수이다.  액션을 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 반환하는 상태는 새로 만들어서 반환해준다.

function reducer(state=initialState,action){ //현재 상태와 액션 객체를 받아온다 
	switch(action.type){
    case INCREMENT:
    	return {
        	counter:state.counter+1 // 액션 객체에 따라서 새로운 상태를 만들어서 반환해준다.
            };
    defulat:
    	return state;
    }
}

4) 스토어

스토어 안에는 현재 상태와 리듀서가 들어있으며 몇 가지 내장함수(디스패치, 구독)가 있다

 

5) 디스패치

스토어 내장 함수 중 하나.

액션을 발생시키는 함수이다. dispatch(action) 형태로 액션 객체를 파라미터로 넣어 호출한다.

dispatch가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.

 

  const dispatch = useDispatch(); //react-redux에서 제공한다
  const onGetAllComments = () => {
    dispatch(getAllComments()); // 액션생성객체를 호출해서 액션객체를 dispatch에 넘겨준다
  };

 

6) 구독

스토어 내장 함수 중 하나이다. subscribe 내에 listener함수를 만들어서 파라미터로 전달해 호출하면 액션이 디스패치되어 상태가 업데이트 될 때마다 listener함수가 호출된다.

 

const listener=()=>{
console.log('상태 업데이트됨');
}

const unsubscribe=store.subscribe(listener);
unsubscribe(); // 구독을 없앨 때 호출해주면 된다.

리덕스 3가지 규칙

1. 단일 스토어

• 하나의 애플리케이션에는 하나의 저장소가 들어있다
• 여러개의 저장소를 쓸 수도 있지만 상태관리가 복잡해질 수도 있어서 권장하지 않는다 

2. 읽기 전용 상태

• 상태를 업데이트할 때 기존 객체는 건들지 않고 새로운 객체를 생성해줘야한다.
• 기존 react에서 state업데이트 할 때 spread연산자나 immer와 같은 불변성 관리 라이브러리를 사용했던 것 처럼 불변성을 지켜줘야한다.
• 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하여 객체의 변화를 감지할 때 객체의 깊숙한 곳까지 비교하지 않고 겉핥기 식으로 비교하여 좋은 성능을 유지하기 때문이다.

3. 리듀서는 순수한 함수

• 이전 상태와 액션 객체를 파라미터로 받는다.

• 파라미터 이외의 값에는 의존하면 안된다.
• 이전 상태는 변경하지 않고 새로운 상태객체를 만들어서 반환해야한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다. (Date함수나 랜덤값 만드는 것은 리듀서 바깥에서 처리한다)