[React] 리덕스 툴킷

리덕스는 상태관리 라이브러리로, UI/UX에 맞게 데이터를 관리하거나 서버와 주고받는 데이터를 관리한다.

 

기존의 상태관리는 state를 사용해 props를 전달하고, 다시 props로 전달하고.. props로 전달해 상태를 변경시킨다.

props계층이 2계층을 넘어서면 관리하기 어려울 뿐 만 아니라 오류 발생시 해결하기도 어렵다.

 

하지만, Redux와 store를 사용하면 복잡한 과정을 간편하게 관리할 수 있다.

 

---

 

Store : 컴포넌트 상태를 관리하는 저장소. 하나의 프로젝트는 하나의 저장소만 가질 수 있음.

 

Action: 스토어 상태를 변경하기 위한 action. 액션은 객체이며 반드시 type를 가져야한다. 액션 객체는 액션 생성함수에 의해 만들어진다.

 

Reducer: 리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수

 

Dispatch: 스토어의 내장 함수 중 하나. 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할.

 

Subscribe: 스토어의 내장 함수 중 하나로, 리듀서가 호출될 때 subscribe된 함수, 객체를 호출

 

---

 

1. UI 렌더링 될 때, UI 컴포넌트는 리덕스 스토어 state에 접근하여 state렌더링

(ex. 예를들어 num 에 +10을 하는 버튼이 있을 경우 num=0과 버튼을 렌더링)

2. UI에서 state변경되면 dispatch 실행시켜 액션을 발생시킨다.

(ex. 버튼을 누르면, dispatch 실행시켜서 +10을 하는 numPlus10을 발생시킨다.)

3. store로 numPlus10 액션이 들어오면 리듀서를 실행하고, 리듀서에서 나온 num값을 새로운 state로 저장한다.

4. subscribe된 UI는 state 업데이트로 변경된 데이터 새롭게 렌더링

 

 

최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기

 

---

리덕스 툴킷

npm install @reduxjs/toolkit

1. Store연동

import { Provider } from "react-redux";

import store from "./store/index";
import { BrowserRouter } from "react-router-dom";
import ScrollToTop from "./UI/ScrollToTop/ScrollToTop";

//리액트 버전 18이상 부터는 이렇게 써야함!
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //Provider : 해당 리액트앱은 store라는 저장소를 사용하는 앱이다.
  //Provider는 react-redux에서 리액트 앱에 스토어를 연동할 수 있게 해주는 컴포넌트.
  //Provider의 props로 사용할 스토어 지정. store={}
  //하나의 프로젝트에서는 하나의 스토어만을 가질 수 있다.
  <Provider store={store}>
    {/**Routes, Route는 사용하기 위해서 Router로 감싸는데, 18이상은 BrowserRouter로 최상단 컴포넌트인 App을 감싼다. */}
    <BrowserRouter>
      <ScrollToTop />
      <App />
    </BrowserRouter>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

//개발

Provider는 react-redux에서 스토어를 연동할 수 있게 해주는 컴포넌트..

Provider를 불러와서 연동할 컴포넌트를 감싸준 뒤, Provider의 props로 사용할 스토어 지정해준다.

프로젝트 전체에 스토어를 연결할거기 때문에 바깥에 감싸준다.

여기서 Provider의 props로 사용할 스토어는 store로 명명한 index.js

 

2. createSlice 생성, Store 만들기

import { createSlice } from "@reduxjs/toolkit";
//createSllice()는 액션에 대한 함수 설정과 리듀서를 따로 생성하지 않아도 된다.

//state의 처음 상태를 정의
const initialBlacklistState = {
  showBlacklist: false,
  showBlacklistModal: false,
};

//로그인 관련된 state요소들을 최신화 하는 slice (initialLoginState에 있는 state들을 최신화하는 코드)
const blacklistSlice = createSlice({
  name: "blacklist",
  initialState: initialBlacklistState,

  //reducers에서 액션을 설정
  reducers: {
    openBlacklist(state) {
      state.showBlacklist = true;
    },
    closeBlacklist(state) {
      state.showBlacklist = false;
    },
    openBlacklistModal(state) {
      state.showBlacklistModal = true;
    },
    closeBlacklistModal(state) {
      state.showBlacklistModal = false;
    },
  },
});

export const blacklistActions = blacklistSlice.actions;

//전체다 하지말고 리듀서만 임포트하기 위해
//blacklistSlice.reducer로 내보낸다.
//index.js는 전부 리듀서로 받아온다.
export default blacklistSlice.reducer;

 

3. useSelector, useDispatch로 state 접근

//useSelector(): 기존 리덕스의 connect() 사용하지 않고 리덕스의 상태 조회 가능
//useDispatch(): 생성한 액션을 발생시키며, 액션생성 함수를 가져온다.
import { useSelector, useDispatch } from "react-redux";
import { loginActions } from "../../store/login";

const Login = () => {
  const dispatch = useDispatch();

  //useSelector로 스토어에서 현재 상태값을 가져온다.
  const show = useSelector((state) => state.login.showLogin);

  //useDispatch를 통해 변경되는 값을 스토어에 전달.
  const toggleLoginHandler = () => {
    dispatch(loginActions.toggleLogin());
  };

  return (
    <div>
      <button onClick={toggleLoginHandler}>CLICK</button>
      {show && <a href={URL}>로그인</a>}
    </div>
  );
};
export default Login;