리덕스 정리 - 1

Action

상태에 어떠한 변화가 필요하게 될 때 액션을 발생시킨다.

이는 하나의 객체로 표현되며,

{
	type: 'value',
}

type 필드를 필수적으로 가지고 있어야 하며, 나머지 값들은 추가해줄 수 있다.

 

 

Action 생성 함수

액션 생성 함수란, 액션을 만드는 함수로 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

export function 함수명(데이터) {
	return {
    	type: 'value',
    }
}

리턴값은 type 을 포함하는 액션 객체여야 한다.

액션 생성 함수는 필수는 아니지만 액션을 손쉽게 사용하기 위해서 사용해준다.

 

 

Reducer

변화를 일으키는 함수로, 첫번째 파라미터는 state / 두번째 파라미터는 action 이다.

export default function(state, action) {
	switch (action.type) {
    case 'value1':
      return changeState;
    case 'value2':
      return changeState;
    default:
      return state;
  }
}

현재 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환해준다.

useReducer 랑 동일한 형태임

특히나 action.type 을 검사할 때, switch 문을 사용하며 default 부분에 기존 state 를 반환해줘야 한다.

 

그리고 ** 리덕스를 사용할 때는 여러 개의 리듀서(서브 리듀서)를 만들고

이를 combineReducers()로 합쳐서 index.js 에 rootReducer 로 만들고

해당 리듀서를 configureStore() 하여 Store 를 만들어준다.

 

 

Store

리덕스에선 1개의 어플리케이션 당 하나의 스토어를 만들어준다.

 

스토어 안에는

• 현재 앱 상태
• 리듀서
• 내장 함수 몇 가지

 

 

Dispatch

스토어의 내장 함수 중 하나로,

액션을 발생시키는 함수이다.

파라미터로는 액션을 전달해준다. 여기서 위에 설명한 액션 생성 함수를 호출해줄 수도 있다.

const dispatch = useDispatch();

// ...

dispatch({ type : 'value1' });
또는
dispatch(value1);

스토어는 리듀서 함수를 실행시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태로 만들어준다.

 

 

Subscribe

스토어의 내장 함수 중 하나로, 함수 형태의 값을 파라미터로 받아온다.

subscribe 함수에 특정 함수를 전달하면 액션이 dispatch 되었을 때마다 전달해준 함수가 호출된다!

하지만 해당 함수를 사용하기보다는 주로 connect(react-redux) 또는 useSelector 훅을 사용하여 스토어 상태를 구독해주는 방식을 사용해준다.

 

 

리덕스의 3가지 규칙

1. 하나의 애플리케이션 안에는 하나의 스토어만

여러 개의 스토어를 사용할 순 있으나, 개발 도구를 활용하지 못하게 되므로 비추천

 

2. 상태는 읽기 전용

리액트에서는 상태 업데이트 시, setState 를 사용하고, 배열을 업데이트 해야할 땐 배열 자체에 push 를 사용하지 않고 concat 이나 전개 연산자를 활용한다. 객체 또한 Object.assign 이나 전개 연산자를 사용하여 업데이트 하듯

 

리덕스에서도 기존 상태를 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해줘야한다.

불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것으 감지하기 위해서 shallow equality 검사를 하기에 객체의 뱐화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아닌 겉핥기 식으로 비교하여 좋은 성능을 유지해주기 때문이다.

-> Immutable.js 나 Immer.js 를 사용하여 불변성을 유지하며 상태 관리가 가능

 

 

3. 변화를 일으키는 함수인 리듀서는 순수한 함수여야 한다.

1. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다
2. 이전 상태는 절대 건들지 않고 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다
3. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다

-------> new Date() 나, Math.random() 등의 계속 변경되는 작업은 리듀서 밖에서 해줘야 함!