도서 정리 프로젝트(2)

리덕스 학습 및 적용

학습 과정

코딩애플과 생활 코딩을 통해 개념 및 간략한 사용법을 익히며 학습 진행 중 마주친 deprecated 메시지.

기존의 Redux 에서 RTK(Redux ToolKit)로 문법이 최신화 되었다.

createStore는 이제 (구)문법으로 처리되어 최신문법인 configureStore를 쓰도록 안내해준다.

createStore 사용 시 발생하는 안내

createStore 대체 문법 안내글

 

Provider에 state값을 넘겨주지 않아서 마주친 에러.

props 로 넘겨주어 해결

Provider로 컴포넌트를 감싸줌으로써 내부에서 Redux의 state를 사용할 수 있게된다.

Provider state에러

import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';

const weight = 100;
function reducer(state = weight, action) {
  return state
}
const store = configureStore({reducer}); // 객체를 파라미터로 받는다.

// 수정 전
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

// 수정 후
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

조건부 Reducer의 설정과 그것을 사용하기 위한 useSelector와 dispatch사용

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';

const weight = 100;
function reducer(state = weight, action) {
  if (action.type === 'plus') {
    state++;
    return state;
  } else if (action.type === 'minus') {
    state--;
    return state;
  } else {
    return state
  }
}
const store = configureStore({reducer}); // 객체를 파라미터로 받는다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// index>App>MainPage.js
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import BookList from '../components/BookList'

export default function MainPage() {
const calledState = useSelector((state) => state);
const dispatch = useDispatch();

  return (
    <div>
      <BookList />
      {calledState}
      <button type='button' onClick={() => {dispatch({type : 'plus'})}}>+</button>
      <button type='button' onClick={() => {dispatch({type : 'minus'})}}>-</button>
    </div>
  )
}

---

기초 개념과 기본 사용법에 대해 이해하고, 최신 문법으로 다시 리팩토링을 진행해보자.

// cart.js
import { createSlice } from "@reduxjs/toolkit";

// initialState 에 상태의 최초값을 선언
const initialState = {
  arryItems : ['apple', 'banana', 'orange'],
  number : 4,
  total : 3,
  isLoading : true
}

// createSlice 로 Slice 생성
// 기존의 reducer 문법과 slice의 이름, 값 설정
const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers : {
    clearCart : (state) => {
      state.number = state.number + 1; // (구)문법의 reducer 조건문을 slice 내부에 작성한다.
    }
  }
})

export const {clearCart} = cartSlice.actions

export default cartSlice.reducer;

‘initialState’ 에 상태의 최초값을 선언해준다. (나는 이해를 위해 여러가지 값을 적용시켜보았다.)

‘createSlice’ 로 slice를 만들고, 그 안에는 slice명, initialState, reducers(actions) 등이 포함된다.

console.log(cartSlice); 의 반환값

console.log(cartSlice)

cartSlice.reducer 의 반환값

cartSlice.reducer

dispatch를 활용하기 위해 action도 추출해준다. (clearCart)

// store.js
import { configureStore } from "@reduxjs/toolkit";
import cartReducer from './features/cart';

export const store = configureStore({
  reducer : {
    cart : cartReducer,
  },
})

1. cart.js 의 값을 가져온다. (cartReducer)
2. configureStore 에 reducer 객체를 할당한다.
   • key : cart / value : cartReducer

// MainPage.js
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import BookList from '../components/BookList'
import { clearCart } from '../features/cart';

export default function MainPage() {
  const dispatch = useDispatch();
  const cart = useSelector((store) => store.cart);
  // console.log(cart);

  return (
    <div>
      <BookList />
      <p>{cart.number}</p>
      <button onClick={() => {dispatch(clearCart())}}>+</button>
    </div>
  )
}

1. useSelector로 store의 cart를 가져온다.(store.cart)
2. useDispatch의 사용은 type을 넘겨주는 대신 reducer함수를 호출 하는 것이다. (actions의 clearCart 함수)

actions의 clearCart() 함수

 

---

이제 어떻게 사용하는지는 이해한 것같다. 그렇다면 상태관리는 모든 대상에 적용시켜 사용하는 것이 좋은건가? 그 기준이 무엇이고 어떻게 하는 것이 좋은 방법일까?

우선, 본격적으로 프로젝트를 진행하면서 활용하고 이해해 보도록 하자.