TIL_Redux

Redux?

리덕스는 상태관리 라이브러리 중 하나이다. 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.
또한 리덕스의 midleWare 라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할수도 있게 해준다.

Redux를 쓰는이유

• 프로젝트의 규모가 커질 경우 local state의 전달이 어렵다
• global state의 유지가 어렵다. 예) 로그인 후 유저의 인증정보를 유지할 경우

설치

npm install redux react-redux --save

주요개념

✅ 액션(action)

: 상태 변화를 일으키는 주체 ( 객체형태)

• type 속성 값을 가진 객체

• 액선 객체를 dispatch 매서드를 넣어서 호출

• 액션 생성함수가 생성한 액션 객체는 리듀서를 거쳐 스토어를 업데이트 하게 된다.

//Action creator
function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: text
  } //Action
}

✅ 리듀서(reducer)

: Action을 실행시키는 순수 함수 ( 새로운 상탯값을 만드는 함수 )

function todoApp(state = initialState, action) {
  switch (action.type) {
  case "ADD_TODO":
    return [...state, ...action.payload]
  default:
    return state
  }
}

✅ 스토어 (store)

: 리덕스의 상태값을 가지는 단일 객체 , 전역에서 상태관리를 해주는 공간

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

✅ 미들웨어 (Midleware)

: Action이 Dispath 되어 Reducer에서 처리하기 전에 사전에 지정된 작업들을 의미. 미들웨어를 토해 전달받은 Actions을 콘솔에 기록할 수 있고, Action 취소, 다른 종류의 Action을 추가적으로 Dispath할 수 있다.

참고 : https://velog.io/@taylorkwon92/Redux