항해99 22일차-리덕스

**리덕스

 

리액트에서 데이터는 단방향으로 흐른다.

(부모의 state를 자식은 props로 받아옴)

이때 자식은 부모의 state를 수정할 수 없다.

 

그래서 필요한 것이 리덕스이다.

리덕스-전역상태관리

전역데이터 저장소.

부모컴포넌트, 자식컴포넌트 모두에게 포함된 것이 아니고 완전히 별도로 있는 데이터

이 데이터를 부모, 자식이 가져다 쓰면 된다.

부모가 a라는 데이터를 가지고 있을 때 자식 컴포넌트 1,2,3,4가 있다.

4 컴포넌트만 a라는 데이터를 필요로 한다면 1,2,3컴포넌트는 오직 4에 전달하기위해 데이터를 가지고 있는 것이다.

(props drilling)

이 때에도 a데이터를 전역데이터 저장소에 넣어놓고 4컴포넌트만 가져다 쓰면 된다.

전역상태관리가 리덕스만 있는 것은 아님(리액트 훅도 존재)

*상태관리 흐름

<흐름을 알기 전 기억해야 할 것>

1. 전역으로 흐르는 데이터가 있다.

2.데이터는 컴포넌트가 참조, 수정 할 수 있다.

3.바뀐 데이터 값을 구독중인 다른 컴포넌트들도 볼 수 있다.

 

-스토어: 전역 데이터가 있는 곳

-리듀서: 데이터를 수정하는 공간

-액션: 컴포넌트에서 데이터를 수정하는 것 

-액션 후 리렌더링 된다.(수정한 값을 데이터를 구독 중인 다른 컴포넌트 들에게도 전달)

 

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

리덕스 공식문서

https://ko.redux.js.org/api/store

Store | Redux

스토어의 내장함수 참고하기

 

https://github.com/erikras/ducks-modular-redux

GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

덕스구조 참고하기

1. Reducer는 반드시 export default로 내보내야 한다.

2. export로 (함수를 사용해서)action creator들을 내보내야 한다.

3.action type은 프로젝트이름/reducer/ACTION_TYPE

 

*리덕스 모듈 예제

// widgets.js

// Actions
const LOAD = 'my-app/widgets/LOAD'; //프로젝트이름/모듈명(리듀서명)/어떤 액션인지
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
} 
}

// Action Creators
export function loadWidgets() {
return { type: LOAD };
}

export function createWidget(widget) {
return { type: CREATE, widget };  //자바스크립트 에서는 key값과 value가 같으면 생략 가능하다
									{widget:widget}={widget}
}

export function updateWidget(widget) {
return { type: UPDATE, widget };
}

export function removeWidget(widget) {
return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
} //미들웨어->데이터를 서버에서 받아와서 수정하는 경우 비동기 통신이기 때문에 바로 수정 불가.(데이터를 받아오는 시간이 필요)
이럴 때 미들웨어를 써줘야한다.

 

**설치

yarn add react-router-dom@5.2.1

yarn add styled components

yarn add redux react-redux