👾Redux Toolkit

01. Redux가 들어간 용어

• Redux : 상태 관리자로 Redux는 JS 프로젝트라면 어디서든 사용이 가능하지만 Redux 자체는 React 와 무관하다.

• React Redux : Redux를 React에 사용하기에는 어려움이 있다.

• Redux Toolkit : 위에서 말한 어려움을 해결해주기 위해 Redux에서 내놓은 패키지이다.
  
  

📝 Redux Toolkit의 장점

• 초기 설정이 간편하다.
• Redux Toolkit 내부에 다양한 패키지들이 설치되어 있어 Redux devtool 같은 패키지를 설치하지 않아도 된다.
• 반복되는 코드가 줄었다.
• 불변성을 신경쓰지 않아도 된다.

---

02. Redux와 Redux Toolkit

왼쪽에 있는 원이 Redux의 store이다. Redux에서는 store 하나에 모든 정보를 담았다. 하지만 프로젝트가 커지면 하나에 담기보다 기능별로 나누어 정보를 담아주는 것이 유지보수에 효율적이다.

오른쪽에 있는 원은 각각의 기능을 나누어 담은 store 이다. 각각의 기능을 하고 있는 slice는 작은 store라고 생각하면 된다. Redux Toolkit이 작은 store을 합쳐서, Redux가 요구하는 큰 store로 만들어준다.

---

03. Redux Toolkit 설치 중 오류

🔧 Redux Toolkit 설치

 npx create-react-app 설치 폴더명 --template basic-react

이렇게 설치를 하고 npm start를 했는데 오류 3개가 발견되었다.

🚨 module not found: error: can't resolve 'react-redux'
🚨 module not found error can't resolve '@reduxjs/toolkit
🚨 module not found error can't resolve '@reduxjs/toolkit

이 중에서 2개는 같은 오류였다. 아마 다른 파일에서 각각 오류가 나타난 것 같다. 오류를 해결하려면 루트 디렉터리에서 터미널에서 패키지를 설치하고 다시 서버를 시작해야 했다.

📌 오류 해결

 npm install redux react-redux
 npm install @reduxjs/toolkit

---

04. Redux Toolkit 코드

1. store 생성

configureStore 함수를 @reduxjs/toolki에서 불러와 store를 생성한다. reducer 내부에는 slice의 reducer이 포함되어야 한다.

const store =  configureStore({
    reducer:{
    }
});
export default store;

---

2. Provider

생성한 store을 모든 컴포넌트들이 사용할 수 있도록 속성이 store인 <Provider> 컴포넌트를 불러와서 <Counter> 컴포넌트를 감싼다. <Provider> 부분은 index.js에 추가해줘도 되지만 여기서는 App.js에 넣었다.

export default function App(){
    return (
        <Provider store={store}>

        </Provider>
    );
}

---

3. slice 생성

slice는 작은 store라고 할 수 있으며, slice들이 모여서 하나의 큰 store가 된다고 생각하면 된다. Redux에서는 if, switch문을 사용하여 액션의 동작을 나타냈지만 Redux Toolkit에서는 object 형식으로 작성한다.

const counterSlice= createSlice({
    name: 'counter',
    initialState: {value:0}, 	// 초기값 지정
    reducers: {					// 액션타입
        up: (state, action)=>{
            state.value = state.value + action.payload;
        }
    }
});
export default counterSlice;
// dispatch할 때 액션을 전달하여 상태를 어떻게 변화시킬지를 결정
export const {up} = counterSlice.actions;

이렇게 createSlice에는 세개의 객체를 받아온다.
1. name, 2. initialState, 3.reducers 이들을 사용할 수 있도록 configureStore 에 등록해주어야 한다.

여기서 등록이란 이 글의 4. store에 slice 추가의 과정을 말한다.

---

4. store에 slice 추가

생성한 slice를 store의 reducer에 추가해준다.

const store =  configureStore({
    reducer:{
        couter:counterSlice.reducer
    }
});
export default store;

여기서 counter 부분은 마음대로 작명해도 되지만, counterSlice의 name이랑 똑같이 맞춰주었다.

---

5. counter 컴포넌트 생성

import React from "react";
import {Provider,useSelector,useDispatch} from 'react-redux';
import store from './store';
import {up} from './counterSlice';

function Counter(){
    const dispatch = useDispatch();
    const count = useSelector(state=>{
        return state.couter.value;
    });
    return <div>
              <button onClick= {()=>{ dispatch(up(2));}}>
               +
              </button>{count}
  		   </div>
}

useSelector는 매개변수가 state인 콜백함수를 하나 받아준다. 이때 state는 counterSlice 안에 있는 객체를 받아온다.

---

6. App.js에 couter 컴포넌트 추가

import React from "react";
import {Provider,useSelector,useDispatch} from 'react-redux';
import store from './store';
import {up} from './counterSlice';

export default function App(){
    return (
        <Provider store={store}>
            <div>
                <Counter></Counter>
            </div>
        </Provider>
    );
}