Redux toolkit

---

Redux를 사용하는 이유

1. state를 한 저장소에서 관리하기 위해

=> props 필요 없이 state를 사용가능

2. 수정방법을 reducer 함수로 정의함으로써

=> state 수정 시 발생하는 버그를 줄일 수 있다.

npm install redux react-redux

1. 우선 redux를 설치하기 위해 명령어를 터미널에 입력한다.

npm install @reduxjs/toolkit

2. 신규방식의 Redux 공식 toolkit 라이브러리를 사용하려면 명령어 하나를 더 입력해야 한다.

=> 전통방식을 사용한다면 굳이 설치할 필요 없다.

---

Redux - state 생성하는 법

import React from 'react';
import ReactDOM from 'react-dom';
import { createSlice, configureStore, PayloadAction } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import App from './App';

interface Count { count: number, user: string}

const initialState: Count = { count: 0, user : 'hong' };

const counterSlice = createSlice({
  name: 'counter',
  initialState : initialState,
  reducers: {
    increment (state){
      state.count += 1
    },
    decrement (state){
      state.count -= 1
    },
    incrementByAmount (state, action :PayloadAction<number>){
      state.count += action.payload
    }
  }
})

let store = configureStore({
  reducer: {
    counter1 : counterSlice.reducer
  }
})

//useSelector 타입지정
export type RootState = ReturnType<typeof store.getState>
//useDispatch 타입지정
export type AppDispatch = typeof store.dispatch
//만든 함수 export
export let {increment, decrement, incrementByAmount} = counterSlice.actions

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

1. createSlice 함수

=> name : slice이름,

=> initialState : state 초기값

=> reducer : 작성할 함수

      => 첫 파라미터 : state, 둘째 파라미터 : actions (자동생성)

 

2. configureStore 함수

=> 작성한 reducer 함수를 등록

 

3. export type

=> state 꺼내는 함수 타입지정

=> state 수정함수 타입지정 

 

4. export let

=> 외부에서 reducer 함수 사용을 위함.

 

5. action 파라미터 타입지정

=> import { PayloadAction } from '@reduxjs/toolkit';

=> action :PayloadAction <number>

 

6. payload

=> 수정할 때 보내는 데이터를 의미

=> <T> 타입 지정 필요

---

Redux - state 꺼내는 법

import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import {RootState, AppDispatch,increment} from './index'

function App() {

  const state = useSelector( (state :RootState) => state);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div className="App">
      {state.counter1.count}
      <button onClick={()=>{dispatch(increment())}}>버튼</button>
    </div>
  );
} 

export default App;

1. useSelector

=> state 꺼내는 함수.

 

2. useDispatch

=> state 수정 요청 함수.

 

3. 사용법

=> state : {useSelector명. 함수명. 변수명}
=> dispatch:()=>{useDispatch명(함수명())}

---

리액트를 사용할 때 항상 props만 사용하느라 자식이 많아지다 보면 불편한 부분이 생기기 마련인데,

마침 redux를 타입스크립트를 공부하면서 접하게 될 줄이야..

그렇지만 아직까지는 크게 메리트를 못 느끼겠다.

큰 프로젝트에서는 쓸만할 것 같긴 한데,

작은 프로젝트에서는 쓸데없이 코드만 긴 것 같은 느낌? 이 조금 든다.

 

Vue.js는 Vuex라는 Redux랑 비슷한 state 저장소 라이브러리가 있다는데,

그것이 조금 더 깔끔하다고 한다.

그래도 Redux도 많이 개편되고 있다니... 전망은 좋은 것 같다!