JS에서의 기초 Redux 사용 방법과 구조

기초부터 JS에서의 리덕스를 알아보자

첫째로 리덕스의 문법이 바뀐건 아니지만 vscode에서도 바꾸길 권장하기에 redux_toolkit을 이용해서 바꾸려고 한다.

리덕스는 아래와 같은 함수의 구조로 이루어 진다.

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({ reducer: -function- });

function 에는 reducer에는 함수를 인자로 넣어 어떤 동작에 대해 어떻게 행동하는지에 대한 정의를 내려주는 함수를 정의 해준다.

const reducer = (-initialState-, -action-) => {
  switch (action.type) {
    case a :
      return;
	  case b :
			return;
    default:
      return state;
  }
};

reducer 함수에서는 인자로 보내진 action.type이 어떤것인지에 따라 케이스별로 값의 변화를 리턴함

주의사항으로 return 을 할때 새로운 값으로 return 으로 값 변화한 값이 아닌 새로운 값으로 리턴해야됨

arr.push(1) ❌

[ 1 , …arr] ⭕️

---

redux값을 정해준 store에서 정해진 다양한 함수가 있다

getState()

현재 설정된 store에서 저장된 값을 가지고 온다.

// reducer 함수에서 처음에 설정된 initalState 값이 1 이면 1을 리턴해줌
store.getState();

---

dispatch(actionObject)

store 에 있는 값을 변화 시킬때 사용한다.

store.dispatch({type : “add’ , text : “추가하기” }) 코드는 reducer 에서 해당 action.type 이 add 인것을 확인하고 해당된 코드를 실행해 값에 변화를 준다.

store.dispatch({type: ?? , ?value})

---

subscribe(function)

subscribe 는 redux의 store의 값이 변화할때 실행되는 함수를 정해줌

const onChange = () => {
  number.innerText = countStore.getState();
};

store.subscribe(onChange);

---