Redux

Redux

Redux란? 자바스크립트 상태관리 라이브러리이다.
또한 Redux는 단반향으로 이루어져있다. 양방향으로 이루어져있으면 양쪽에서 바꾸면서 편하긴하나 좀만 더 복잡한 프로젝트이면 버그가 생길 확률이 높아 단반향으로 이루어져있다

Redux 구조

Store

예를 들어서 설명하자면 컴포넌트 a,b,c가 있고 각각의 state가 있다고 가정했을때 그리고 이 컴포넌트 서로 할아버지 아버지 아들 이라는 서로 부모 자식관계라고 가정했을때
컴포넌트 c인 아들 컴포넌트에서 컴포넌트 a인 할아버지 컴포넌트에 state를 전달 및 변경할 수 가 없다. redux에서 하나의 컴포넌트 abc를 다 관리하겠다 즉, 이 안에서 state관리하겠다. 바로 앞선 줄에 설명한 부분이 store이다.

Action

Aciton은 스토어에 운반할 데이터 정보등을 말하고 대게 객체로 유지하고 있다.

{
	type:"chageData"
  	data: data 
}

type은 stirng으로 유지 그리고 action의 정보를 구분하기 위해 type을 써주고 store에 보낼 데이터를 부른다.

Dispatch

aciton 객체를 store에 보낼 매개체가 필요하다. 그 매개체가 dispatch 이다.

store.dispatch({
	type:"chageData"
  	data: data 
})

이렇게 액션 객체를 dispatch를 해야 비로서 store에 전달된다.

Reducer

앞선 이미지를 보면 action 과 store 사이에 reducer가 있다. 아직 reducer에 설명이 안되였기에 앞선 action 내용에 store를 전달한다고 하였지만 action 객체 생성 후 dispatch 행위는 reducer에 전달하는 것이다.
왜 store가 아닌 reducer에 전달하여야 하는걸까?
내가 이해한 방식으로 실생활에 예시를 들어 설명해보자면
우리가 파스타집에 갔다. 나는 기본 파스타를 원하고 다른 사람은 로제파스타를 원하고 혹은 다른사람은 맵게한 파스타를 원하다고 가정 그리고 이 주문내역을 action으로 간주 그리고 우리는 벨을 누른다 벨을 누른 행위를 dispatch로 간주 그러면 종업원분께서 오게 되는데 우리는 종업원 분께 우리가 원하는 파스타의 내용을 말한다. 그리고 종업원분은 내용을 종합해 주문을 받는다. 즉, 이 종업원분이 reducer이다. type이 다른 무수한 action들이 있을것이고 그리고 이 각기 다른 data들을 종합해 주는게 필요하다. 이 각기 다른 data들을 새로운 state를 만들어 store의 상태를 업데이트 하는 것이다.

const reducer = (action) => {
  switch (action.type) {
    case "기본":
      return "기본파스타"
      case "맵게" :
        return "매운파스타"
        case "로제" :
          return "로제파스타"
  }
}

주의!
새로운 state를 만든다고 했으나 사실 대치하는 것이고 그러므로 불변성을 가진다.

> getState & Subscrible

getState & Subscrible 가 있는데 getState는 현시점에 store의 상태를 보겠다는 것이고 Subscrible은 이벤트를 reducer에서 불러올때 실행시킨다는 것이다.

store.getState()

const stateChanged = () => {
  console.log("Reducer Changed!")
}
countStore.subscribe(stateChanged)
// 실행되는 시점에서 reducer가 store를 업데이트 할 때 화면을 바꿔주는 코드이다.
// react-redux에 기능이 있다. react-redux를 쓴다고 가정했을때 잘 쓰이지 않는다.

코드예시

npm install redux
yarn add redux
// 설치 후 실행

import { createStore } from "redux";
const reducer = (preveState = initialState,
action) => {
  switch (action.type) {
    case "기본":
      return { client: action.data };
    case "맵게":
      return { client: action.data };
    case "로제":
      return { client: action.data };
  }
};
const initialState = {
  client: "주문내역없음",
};
const store = createStore(reducer, initialState);
const handlePastaA = (data) => {
  //aciton
  return { type: "기본", data };
};
const handlePastaB = (data) => {
  //action
  return { type: "맵게", data };
};
const handlePastaC = (data) => {
  //action
  return { type: "로제", data };
};
store.dispatch(handlePastaA("기본파스타"));
console.log("기본", store.getState());
store.dispatch(handlePastaB("매운파스타"));
console.log("맵게", store.getState());
store.dispatch(handlePastaC("로제파스타"));
console.log("로제", store.getState());

틀린 내용이 있을시 댓글 달아주시면 감사하겠습니다.