Redux 필수 키워드 정리

Universe·2022년 12월 8일

리덕스 3형제

1. Action

상태에 어떤 변화가 필요하게 될 때 Action 을 발생시킨다.

Action은 객체로 표현된다.

{
	type: "TOGGLE_VALUE"
}

{
	type: "ADD_DATA",
	data: {
		id: 0,
		name : 'soo'
	}
}

type은 필수적인 key 값이 되고 그 밖의 요소들은 선택사항이다.

2. Action Creator

Action 을 만드는 함수, 파라미터를 받아와서 Action 객체로 변형시킨다

export const changeInput = text => ({
	type: "CHANGE_INPUT",
	text
})

필수사항은 아니라고 한다. 액션을 발생 시킬 때마다 직접 객체를 작성할 수도 있다.

3. Reducer

변화를 일으키는 함수, 두가지의 파라미터 state와 action을 받아온다.

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

리덕스의 reducer 에서는 default 값으로 state를 그대로 불러오는게 원칙.

4. Store

4-1. dispatch

스토어의 내장함수. Action 을 발동 시키는 것.

dispatch 함수에 Action을 파라미터로 전달하여 사용한다.

4-2. subscribe

스토어의 내장함수 두번째. 함수 형태의 값을 파라미터로 받아온다.

Action이 dispatch에 의해 발동될 때 마다 전달해준 함수가 호출된다.

보통은 useSelector Hook 을 사용해서 store 의 상태에 구독한다.

Reduxd의 3가지 규칙

1. One App One Store
두개 이상의 스토어가 가능은 하나 권장되지 않는 방법. 개발 도구를 활용할 수 없음.

2. ReadOnly
state 불변성을 유지해야 한다는 의미. 새로운 상태를 생성하여 업데이트 해주는 방식으로.

3. 리듀서 : 동일 인풋 => 동일 아웃풋
실행할 때 마다 변경되는 로직을 짜서는 안된다. (순수한 함수여야 한다)

Redux 모듈 만들기

리덕스 모듈 :
	1. 액션 타입
	2. 액션 생성함수
	3. 초기값 설정
	4. 리듀서

Redux 만들기 순서

1. 모듈을 만든다.

1-1. 액션의 타입을 정의한다.

// store.js

const ACT_TYPE = "ACT_TYPE"

human error 를 방지하기 위해서 타입명을 대문자 상수로 저장해준다.

1-2. state의 초기값과 리듀서를 설계한다.

const initialState = []

export default function reducer(state = initalState, action){
	switch(action.type){
		case ACT_TYPE:
			return [...state, {id:Date.now()}]
		default:
			return state;
	}
}

초기값은 빈 배열

action.type 이 ACT_TYPE 이라면 기존값에 더해 Date now() 를 id로 갖는 객체를 담은 배열을 리턴.

리듀서는 setState 처럼 ‘이전의 값을 건드리지 않고 새로운 상태를 만들어서 반환’ 해야 하므로

해당되는 return 에 앞으로 나아갈 방향을 만들어주는 느낌.

1-3. action creator 을 만든다.

export const addId = () => {
	return {
		type:ACT_TYPE
	}
}

해당 creator 에 어떤 것을 인자로 받을 지, 어떤 type을 리턴할 지 명시해준다.

2. 다 만든 모듈을 잘 포장해서 Provider 해준다.

import { Provider } from "react-redux";
import store from "./store";

...
root.render(
		<Provider store={store}>
        <App />
    </Provider>
)

Provider 는 만든 모듈을 사용할 수 있게 해준다.

3. useDispatch & useSelector를 사용한다.

import { useDispatch, useSelector } from "react-redux";
import { addId } from './store'

....
const data = useSelector(state => state)
const dispatch = useDispatch();
const onAddId = () => dispatch(addId());

추가사항

# 👇️ with NPM
npm install redux react-redux

# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/react-redux

# ----------------------------------------------

# 👇️ with YARN
yarn add redux react-redux

# 👇️ ONLY If you use TypeScript
yarn add @types/react-redux --dev