2020-01-30 리액트 수업 - Redux

Redux

 

1) 단일 스토어를 만드는 법

 

2) 리액트에서 스토어 사용하는 법

 

2가지를 익혀야함

 

스토어 사용 준비하기

1) import redux

2) 액션을 정의하고

3) 액션을 사용하는, 리듀서를 만들고

4) 리듀서들을 합친다

5) 최종으로 합쳐진 리듀서를 인자로, 단일 스토어를 만든다

 

사용하기 - 준비한 스토어를 리액트 컴포넌트에서 사용하기

1) import react-redux

2) connect함수를 이용해서 컴포넌트에 연결

 

**Store가 너무 커지면 어케해야하냐?

관심사가 비슷한걸로 쪼개서 서로 상태에 영향을 미치지않도록 만들어야한다.

 

Action

그냥 객체이다.

type만 필수 프로퍼티이자 문자열이다.

payload가 있는 액션과 payload가 없는 액션 2가지 형태가 있다.

 

액션을 생성하는 함수를 액션 생성자 라고 한다.

함수를 통해 액션을 생성하고 액션 객체를 리턴해준다.

 

리덕스의 액션은 어떤 역할을 하나?

 

1) 액션 생성자를 통해 액션을만듬

2) 만들어낸 액션 객체를 리덕스 스토어로 보냄

3) 리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경 됨

4) 변경된 상태값에 의해 상태를 이용하고 있는 컴포넌트 변경

5) 액션은 스토어에 보내는 일종의 인풋이라 생각할 수 있다.

 

액션을 준비하기 위해서는?

1) 액션의 타입을 정의하여 변수로 빼는 단계

2) 액션 객체를 만들어 내는 함수를 만드는 단계 

 

// actions.js

// 액션의 type 정의
// 액션의 타입 => 액션 생성자 이름
// ADD_TODO => addTodo
export const ADD_TODO = 'ADD_TODO';

// 액션 생산자
// 액션의 타입은 미리 정의한 타입으로 부터 가져와서 사용하며,
// 사용자가 인자로 주지 않습니다.
export function addTodo(text) {
  return { type: ADD_TODO, text }; // { type: ADD_TODO, text: text }
}

Reducer

액션을 주면, 그 액션이 적용되어 달라진 결과를 만들어 줌.

그냥 함수입니다.

Pure Function 

(부수효과를 일으키지않는 함수이다. 인자와 리턴값이 다른 상태에 의해서 바뀌면 안되는 함수)

Immutable 

(리듀서를 통해 스테이트가 달라졌음을 인지하는 방식이다)

 

액션을 받아서 스테이트를 리턴하는 구조

 

 

Store

const store = createStore(리듀서)

위와 같은 형태로 만든다.

한개의 프로젝트는 단 하나의 스토어만 가질 수 있고, 스토어 안에는 상태와 리듀서가 들어가있고, 내장함수들이 있다.

 

dispatch : 스토어의 내장함수이자 , 액션을 발생시키는 것

 

 

 

action을 정의하고, action 생성자를 만들고, reducer를 수정한다. 라는 로직!!!

 

 

React-redux

Provider 컴포넌트를 제공해준다.

connect함수를 통해서 컨테이너를 만들어준다.

 - 컨테이너는 스토어의 state와 dispatch를 연결한 컴포넌트에 props로 넣어주는 역할을 한다.

 

필요한 부분?

 - 어떤 state를 어떤 props에 연결할 것인지 정의

 - 어떤 dispatch를 어떤 props에 연결할 것인지 정의

 - 이 props를 보낼 컴포넌트를 정의

 

react에서 redux를 사용할때 가장 많이 쓰이는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것

 

프레젠테이셔널 컴포넌트는 props를 받아와 화면에 보여주기만 하는 친구

컨테이너 컴포넌트는 리덕스와 연동되어 있는 컴포넌트로 리덕스로부터 상태를 받아 오기도하고 리덕스 스토어에 액션을 디스패치 하기도 하는 친구

 

--> 이렇게 하는 이유? 코드의 재사용성 증가, 관심사의 분리 가능