Redux 흐름

Jiwontwopunch·2022년 5월 30일
0

독학

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

0개의 댓글