React Blog - 리덕스 적용

이제 프로젝트에 리덕스를 적용해야합니다.
추후 비동기 작업을 관리할때 redux-saga 를 쓸 것이고, 지금 당장은 미들웨어에 대한 관심은 접고 리덕스 스토어를 생성하고 Provider 컴포넌트를 통해 플로젝트에 리덕스를 적용하는 과정만 다루겠습니다.

npm i redux react-redux redux-actions immer redux-devtools-extension

위의 명령어를 이용하여 필요한 라이브러리를 설치합니다.

immer는 불변성을 좀 더 편하게 관리할수 있게 해줍니다.

라이브러리 설치 후 첫 번째 리덕스 모듈을 만들어 줍니다. Ducks 패턴을 사용해서 액션 타입, 액션 생성 함수, 리듀서가 하나의 파일에 다 정의되어 있는 리덕스 모듈을 작성합니다.

src/modules 디렉터리 생성 후, 그 안에 auth.js라는 모듈을 생성하고 리듀서의 틀만 만들어 내보내 줍니다.

이 후 루트 리듀서를 만듭니다. 지금은 하나만 만들고 나중에 필요한 것을 추가로 만듭니다.
루트 리듀서를 만든 후에 프로젝트의 엔트리 파일 index.js에 스토어를 생성하고, Provider를 통해 리액트 프로젝트에 리덕스를 적용합니다.