Javascript redux 사용법 1/3

🔥Javascript redux 사용법 1/3

안녕하세요 TriplexLab 입니다.
이번시간에는 vanillaJS에서 redux에 대해서 살펴보도록 하겠습니다.

Redux는 전역 상태관리 라이브러리 입니다.

Redux는 크게 4가지 만 기억하면 됩니다.
subscribe, action, reducer, store 입니다.

👀Redux 컨셉

component(화면)와 store(데이터 저장공간)가 있는데요. store에서 저장되어 있는 데이터를
component가 subscribe을 통해서 사용할수 있게 되는 것입니다.

Redux의 핵심 코어

그러면 component에서 어떠한 값을 변경하면 그 값을 store에 데이터도 업데이트를 해야 할텐데 이럴때 다이렉트로 업데이트를 하는것이 아니라 바로 action과 reducer를 통해서 값을 관리를 하게되는것 입니다.

Redux의 핵심 코어

👉ducks의 흐름

1. component에서 dispatch함수를 통해 action(type)을 호출을하게 되고
2. action에 정리되어 있는 내용이 reducer(조건)로 의해서 handle이 되고,
3. reducer(조건)에 따라서 상태값이 update가 이러나게 되는것 입니다.
4. 그리고 그 update가 된 store를 subscribe을 통해서 실시간으로 받아와서 component(화면)에 뿌려주는것 입니다.

👉ducks의 구성요소가 어떤 데이터 타입인가?

1. action type은 type을 가진 객체다.
2. reducer는 새로운 상태값을 반환하는 함수다.
3. action creator는 action type을 반환하는 함수다.

---

👉코드로 설명

// index.js

import {legacy_createStore as createStore, combineReducers} from 'redux';

const countModifier = () => { //reducer는 data를 바꾸는(modifier) 걸 책임진다.
  return "hello" // 만약에 "hello"를 리턴하면 이게 전체 서비스에 있는 data가 됩니다.
}

const countStore = createStore(countModifier) //store는 data를 저장하는 곳!

console.log(countStore)

createStore함수에서 리턴한 메소드들

console.log(countStore.getState())

4~5가지 메소드 중에서 getState() 메소드에 접근하면 다음과 같이 "hello"라는 문자를 볼수 있습니다.
이것은 countModifier함수에서 리턴한 문자열 입니다.

reducer 함수가 리턴한 값

그래서 (reducer) 여기서는 countModifier함수가 아주 중요합니다.‼️ 다시 말하면
즉 countModifier함수가 "hello"라고 return을 하면 전체 서비스의 data가 되는 것입니다.

---

👉Store and Reducer [링크참고]

reducer함수는 인자로 state를 가지게 될겁니다.(이것은 그냥 "첫번째 인자에 state가 들어오는 구나"라고 받아들이시면 됩니다.!!)
그리고 다음과 같이 initialState라는 딕셔너리(dictionary)에다가 배열형식으로 넣어놨습니다.

//초기값 선언
const initialState = {
  list: ["영화관 가기", "매일 책읽기", "수영 배우기"]
}

// Reducer
const modifier = (state = initialState) => { //reducer는 data를 바꾸고 modify하는 걸 책임진다.
  return state
}

const rootStore = createStore(modifier) //store는 data를 저장하는 곳!
console.log(rootStore.getState())

initialState초기값을 state에다가 할당을 하므로써 전체 서비스에 data로 연결할수 있게 되었습니다. 👍👍🔥
countModifier함수(reducer) 만 유일하게 data를 수정할 수 있습니다. (밖에 다른 함수를 만들어서 state를 변경하는 함수는 없을 거란 말입니다.) 오직 유일하게 reducer에서만 data를 수정할 수 있습니다.

콘솔에 이와같이 결과가 출력

---

👉Actions

//초기값 선언
const initialState = {
	list: ["영화관 가기", "매일 책읽기", "수영 배우기"]
}

// Action Creators
const createBucket = (bucket) => {
	return {type: 'bucket/CREATE', bucket}
}

// Reducer
const modifier = (state = initialState, action) => { //reducer는 data를 바꾸고 modify하는 걸 책임진다.
  switch (action.type) {
    case "bucket/CREATE" : {
        const new_bucket_list = [...state.list, action.bucket];
        return {list : new_bucket_list};
    }
    default: return state;
  }
}

const rootStore = createStore(modifier) //store는 data를 저장하는 곳!
console.log(rootStore.getState())
rootStore.dispatch(createBucket("data1")) //dispatch로 Action에 데이터 추가
console.log(rootStore.getState())

만약 dispatch에 딕셔너리(dictionary)형태로 값을 넣으면 리덕스 내부적으로 Reducer를 부를 거고(여기서는 modifier함수), 두번째 인자에 있는 action에 딕셔너리의 값들이 들어가게 됩니다.
그리고 getState으로 밑에서 또 호출하게 되면 아래와 같은 data가 보입니다.👇👇

콘솔에 data1데이터 추가된 모습

---

👉subscribe

subscribe은 우리에게 store안에 있는 변화들을 알 수 있게 해준다.
그래서 이번에 우리가 해볼려는 것은 버튼을 클릭하면 store안에 있는 데이터를 화면에 뿌리는것을 해보겠습니다.

const onChange = () => {
  app.innerHTML = rootStore.getState().modifier.list //화면에 데이터를 뿌립니다.
}

const rootStore = createStore(rootReducer) //store는 data를 저장하는 곳!
const handleAdd = () => {
  rootStore.dispatch(createBucket("data1")) //이벤트가 발생하면 dispatch함수 실행해서 데이터를 추가함
}

rootStore.subscribe(onChange) //subscribe를 사용해서 store에 state가 변했다는것을 감지할수 있습.
btn.addEventListener("click", handleAdd) //이벤트 등록

👉전체 코드

import {legacy_createStore as createStore, combineReducers} from 'redux';

const app = document.getElementById("app");
const btn = document.querySelector(".btn");

const initialState = { //초기값 선언
	list: ["영화관 가기", "매일 책읽기", "수영 배우기"]
}

const CREATE = 'bucket/CREATE';

// Action Creators
const createBucket = (bucket) => {
	return {type: CREATE, bucket}
}
// Reducer
const modifier = (state = initialState, action) => {
  switch (action.type) {
    case CREATE : {
			const new_bucket_list = [...state.list, action.bucket];
			return {list : new_bucket_list};
		}
    default: return state;
  }
}

const rootReducer = combineReducers({modifier})

const onChange = () => {
  app.innerHTML = rootStore.getState().modifier.list
}

const rootStore = createStore(rootReducer)
const handleAdd = () => {
  rootStore.dispatch(createBucket("data1"))
}
app.innerHTML = rootStore.getState().modifier.list
rootStore.subscribe(onChange)
btn.addEventListener("click", handleAdd)

👉정리

modifier(Reducer)함수 안에는 현재 상태를 보여주는 state 값이 들어갑니다. 그리고 action도 사용할수 있습니다.
action은 modifier(Reducer)와 소통 하는 방법입니다. 어떻게 Reducer에게 action을 보낼수 있냐하면
dispatch를 사용하는것 입니다.(combineReducers[참조링크])

dispatch가 Reducer를 불러서 current state와 그리고 네가 보낸 action을 더해서 store에 저장해놓습니다.
그리고 만약에 state가 변경되었을때 store에서 감지하고 싶다면 subscribe함수를 사용하면됩니다.
그래서 언제든지 store에 state가 바뀌었을때 화면에 데이터를 출력할수 있습니다.

다음에는 React로 redux 이야기를 해보도록 하겠습니다 :)
긴글 읽어주셔서 감사합니다.