Redux

Javascript application들의 state(상태)를 관리하는 방법 → 모든 js에 기능하는 library

---

1. 하나의 애플리케이션에는 하나의 스토어가 있습니다.
2. 상태는 읽기전용 입니다.
3. 변화를 일으키는 함수 리듀서는 순수한 함수(
   동일한 인풋 → 동일한 아웃풋)여야 합니다.

액션 타입

액션 생성 함수

리듀서

Ducks Pattern - 한 파일에 몰아서 작성(액션 타입, 액션 생성 함수, 리듀서(export default))

const store = createStore(rootReducer);

console.log(store.getState())

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

presentational component(UI) - redux store에 직접 접근하지 않고 필요한 값 또는 함수를 props로만 받아와서 사용하는 component

container component - redux에 있는 상태를 조회하거나 action을 dispatch할 수 있는 component를 의미

useSelector - 상태를 조회할 때 사용

---

TodoList

TodoItem

TodoList

Todos

shallowEqual → (left, right) => {

return left.diff === right.diff && left.number === right.number;

}

shallowEqual : 얕게 비교하는 것

// shallowEqual
const object = {
  a: {
    x: 1,
    y: 2,
    z: 3
   },
  b: 1,
  c: [1, 2, 3, 4]
}

(left, right) => left.a === right.a && left.b === right.b && left.c === right.c

---

connect HOC 함수를 통해 클래스형 컴포넌트에서 리덕스 연동하기 → 쓸 일 별로 없음

: props를 통해 리덕스의 상태 또는 액션을 디스패치하는 함수를 받아옴

HOC란?

→ 재사용되는 값, 함수를 Props로 받아올 수 있게 해주는 옛날 패턴 → Hook이 대체

connect를 꼭 클래스형 컴포넌트에서 쓸 필요는 없습니다.(함수형 컴포넌트에서도 사용가능)

connect에 대해 알아두면 좋을것들

• mapStateToProps의 두번쨰 파라미터 : ownProps
• connect의 3번쨰 파라미터 : mergeProps
• connect의 4번째 파라미터 : options

---

리덕스 미들웨어(Context API과의 차이)

액션 → 미들웨어 → 리듀서 → 스토어

• 미들웨어를 통해 액션 무시 가능

주로 비동기 작업을 처리 할 때 사용

ex) API 요청

redux-thunk

redux-saga

redux-observable

redux-promise-middleware

리덕스 미들웨어 직접 만들기

redux-logger 사용하기

redux-thunk 사용하기

redux-saga 사용하기

const middleware = store => next => action => {
	// 하고 싶은 작업...
}

function middleware(store){
	return function(next){
		return function(action){
			// 하고 싶은 작업...
		}
	}
}

redux-logger 사용 및 미들웨어와 DevTools 함께 사용

redux-thunk

액션 객체가 아닌 함수를 디스패치 할 수 있습니다.

const thunk = store => next => action =>
	typeof action === 'function'
		? action(store.dispatch, store.getState)
		: next(action)

const getComments = () => (dispatch, getState) => {
	// 이 안에서는 액션을 dispatch 할 수도 있고
	// getState를 사용하여 현재 상태도 조회할 수 있습니다.	
	const id = getState().post.activeId;

	// 요청이 시작했음을 알리는 액션
	dispatch({ type: 'GET_COMMENTS' });

	api
		.getComments(id)
		.then(comments => dispatch({ type: 'GET_COMMENTS_SUCCESS', id, comments })) // 성공시
		.catch(e => dispatch({ type: 'GET_COMMENTS_ERROR', error: e })) // 실패시
};

dispatch(getComments());

redux-thunk로 Promise 다루기