Redux

리덕스는 애플리케이션의 상태를 관리할 때 도움을 주는 라이브러리 입니다.

보통 리액트와 같이 많이 사용하는데 리덕스는 리덕스 자체로 독립적이기 때문에 자바스크립트를 사용하는 모든 곳에서 리덕스를 사용 할 수 있습니다.

이번 글에서는 redux 자체만 다뤄보겠습니다.

먼저

npm install redux

를 터미널에 입력하여 redux 를 프로젝트에 설치 해 줍니다.

---

Redux 는 애플리케이션의 모든 상태를 createStore 로 생성한 하나의 store 에서 관리 합니다. 그리고 사용자는 애플리케이션의 상태에 직접적으로 접근할수도 없고 추가나 수정할수도 없습니다.
상태는 오직 reducer 함수에서만 변경할 수 있으며 어떤 식으로 상태를 변경할건지 정보를 담는 액션 객체를 dispatch 를 통해서만 reducer 에 액션 객체를 전달해 reducer 에서 상태를 변경합니다.
이때 불변성에 의해서 기존의 상태는 변경하지 않고 action 에 의해서 정보를 참고하여 새로운 상태를 만들어 반환 해 줍니다.

위에서 설명한 store, reducer, dispatch, action 과 스토어의 대표적인 api 함수들에 대해서도 알아보도록 하겠습니다.

createStore()

애플리케이션의 상태를 관리하고 변경하는 일을 하는 스토어를 생성해주는 함수 입니다.
첫번째 인자로는 action 에 의해서 어떻게 상태를 변경할지 작성한 reducer 함수를 , 두번째 인자로는 store 의 초기 state 를 인자로 넘겨 줍니다.

const store = createStore(reducer, initialState);

action

애플리케이션의 상태를 어떻게 변경할 것인지에 대한 정보를 담는 객체 입니다.
객체에는 type 필드가 꼭 들어가며 type 의 값에는 일반적으로 대문자로 type 값을 작성 합니다.
이 타입으로 reducer 함수 내부에서 타입에 의해서 상태를 변경 합니다.
예를 들어 무엇인가를 더하는 액션을 만들고 싶으면 아래와 같이 타입을 대문자로 ADD 라고 작성해서 dispatch 를 통해서 전달하면 됩니다.

{ type : "ADD"
}

dispatch

action 객체를 reducer 함수의 두번째 인자로 전달하는 함수 입니다.
action 객체를 인자로 전달하면 dispatch 함수는 reducer 로 action 객체를 전달해줍니다
애플리케이션의 상태를 변경하기 위해서는 dispatch 를 통해 action 객체를 전달해주는 방법 뿐 입니다.

dispatch({
   type : "ADD"
   });

위와 같이 dispatch 를 통해서 액션 객체를 전달해주면 됩니다.

reducer

dispatch 에 의해서 전달된 action 에 의해 상태를 어떻게 변경할지 작성하는 함수 입니다.
보통 action 의 type 에 따라서 상태를 변경하기 때문에 switch 문을 사용하여 코드를 작성 합니다.

첫번째 인자로는 이전 스테이트, 두번째 인자로는 dispatch 에 의해서 전달 받은 action 객체가 매개변수로 받습니다.

const reducer = (state,action) => {
     switch(action.type) {
          case "ADD":
          return { /// 코드 };
          }
 }

스토어의 api 함수들

combineReducers

모듈로 만들어진 다양한 리듀서들을 하나의 rootReducers 로 만들어 줍니다.

import {combineReducers} from "redux";

const rootReducers = combineReducers({
// 리듀서들 작성
}
);

rootReducers 를 export 해서 index.js 에서 불러와
App 컴포넌트를 Provider 로 감싸고 프롭스로 store 에 담아 주면 Provider 로 감싸고 있는 컴포넌트들은 store 에 접근 할 수 있습니다.

import { createRoot } from "react-dom/client";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "../modules/combine";
import App from "./App";

const store = createStore(rootReducer);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

getState()

현재 store 의 현재 상태를 리턴 받을 수 있습니다.

const currentState = store.getState();

subscribe()

store 의 상태가 바뀐다면 subscribe 에 전달하는 함수가 호출 됩니다.
예를 들어 store 의 상태가 바뀐다면 hi 를 콘솔에 출력하도록 해보겠습니다.

const hi = () => {
  console.log("hi");
};

store.subscribe(hi);

위와 같이 코드를 작성하면 스토어의 상태가 변경될 때마다 hi 를 콘솔에 출력 합니다.