- $ npx create-react-app learn-redux
$ cd learn-redux
$ yarn add redux
$ code .
- Redux module 만들기
src/modules/counter.js
todos.js
index.js → root reducer
combineReducers 함수 사용해서 리듀서 합치기
- Redux store 만들기
src/index.js
- 리액트 프로젝트에 리덕스 적용할 때는 react-redux 라이브러리를 사용
$ yarn add react-redux
- src/components/Counter.js
src/containers/CounterContainer.js
▶ 프리젠테이셔널 컴포넌트
리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props로만
받아와서 사용하는 컴포넌트
▶ 컨테이너 컴포넌트
리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트
HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트를 불러와서 사용
- 크롬 웹 스토어에서 리덕스 개발자 확장 프로그램 설치
→ $ yarn add redux-devtools-extension
- 할 일 목록 구현하기
components/Todos.js
containers/TodosContainer.js
App.js 렌더링