이 글은 위 의 링크의 내용을 이해 한 후 읽는 것이 좋습니다.
액션 함수생성(Ation Creator)
액션 생성 함수는, 액션을 만드는 함수 입니다.
단순히 파라미터를 받아와서 액션 객체 형태로 만들어 줍니다.
export const =changeInput = (payload) => {
return{
type:"CHANGE_INPUT",
payload,
};
};
const CHANGE_INPUT = "CHANGE_INPUT"이러한 액션 생섬 함수를 만들어 사용하는 이유는 나중에 컴포넌트에서
더욱 쉽게 액션을 발생시키기 위함 입니다.
그래서 export 하여 다른 파일에서 import 하여 사용합니다.
리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적이진 않습니다.
액션을 발생 시킬 때마다 직접 액션 객체를 작성할수도 있습니다
아래에서 CHANGE_INPUT 을 선언한 이유는 휴먼 에러 방지용으로 생각하시면 됩니다.
Reducer
리듀서는 변화를 일으키는 함수입니다.
리듀서는 2가지의 파라미터를 받아 옵니다.
modules 파일에 만들면 됩니다.
const reducer =(state,action) = >{
switch(action.type){
case CHANGE_INPUT:
return{
// 상태 업데이트 로직
}
default:
return state;
}
}; 리듀서는,현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환 합니다.
이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.
루트 리듀서 만들기
한 프로젝트에 여러개의 리듀서가 있을때는 이를 한 리듀서로 합쳐서 사용합니다.
합쳐진 리듀서를 우리는 루트 리듀서 라고 부릅니다.
리듀서를 합치는 작업은 리덕스에 내장되어있는 combineReducers라는 함수를 사용합니다.
import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';
const rootReducer = combineReducers({
counter,
todos
});
export default rootReducer;
스토어
리덕스에는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다.
스토어 안에는 현재의 앱 상태와,리듀서가 들어있고, 추가적으로 몇가지 내장 함수들이 있습니다.
import { createStore } from 'redux';
import rootReducer from './modules';
const store = createStore(rootReducer); // 스토어를 만듭니다.
console.log(store.getState()); // 스토어의 상태를 확인해봅시다.
createStore를 사용하려고 하면 createStore에 중앙선이 그어져있을텐데
정상 작동 됩니다만 거슬리시는 부늗ㄹ은
redux/toolkit의 configureStore메서드를 사용할 것을 추천드립니다.
dispatch
dispatch 는 스토어의 내장 함수중 하나입니다. 디스패치는 액션을 발생 시키는 것이라고 이해해하시면 됩니다.
dispatch 라는 함수에는 액션을 파라미터로 전달합니다.
const onDelteBtn = (id) => {
dispatch(deleteToDo(id));
};subscribe
subscribe 는 스토어의 내장 함수중 하나입니다.
함수형태의 값을 파라미터로 받아옵니다.
bscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.
리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다.
그 대신에 react-redux 라는 라이브러리에서 제공하는 cuseSelector Hook 을 사용하여
리덕스 스토어의 상태에 구독합니다.
useSelector
기본적으로, useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐
만약 상태가 바뀌지 않았으면 리렌더링하지 않습니다.
const data = useSelector((state) =>state)Ducks 패턴
리덕스를 사용하기 위해서는 결국 우리가 리덕스의 구성요소를 모두 만들어야만 사용이 가능합니다.
근데 만약 리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현하면 어떨까요? 그리고 내가 그 개발자와 협업을 해야 하는 상황에 놓였을 때 수많은 파일 중에 내가 필요로 하는 구성요소를 찾는것이 쉬울까요?
그래서 Erik Rasmussn 라는 개발자가 이것을 패턴화하여 작성하는 것을 제안했는데, 그것이 바로 Ducks패턴입니다.
Ducks 라는 이름은 리덕스의 덕스 라고 합니다.
Erik Rasmussn 가 제안한 Ducks 패턴은 아래의 내용을 지켜 모듈을 작성하는 것 입니다.
-
Reducer 함수를
export default한다. -
Action creator 함수들을
export한다. -
Action type은
app/reducer/ACTION_TYPE형태로 작성한다.
(외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)
그래서 모듈 파일 1개에 Action Type, Action Creator, Reducer 가 모두 존재하는 작성방식입니다.
