👾Redux Toolkit을 사용한 카운터 기능 구현

01. 파일 구성

• App.js : Counter 컴포넌트와 App( )으로 구성된 파일
• counterSlice.js : createSlice로 slice를 생성하는 파일
• store.js : configureStore이 있는 파일
• index.js : 기본 파일

📌 결과물

플러스 버튼을 누르면 가운데에 있는 숫자가 2씩 증가하고 마이너스 버튼을 누르면 가운데에 있는 숫자가 2씩 감소한다.

---

02. 코드 및 문법

1. createSlice를 이용하여 slice 생성

import {createSlice} from "@reduxjs/toolkit";

const counterSlice= createSlice({
    name: 'counter',
    initialState: {value:0}, // 초기값 지정
    reducers: {
        up: (state, action)=>{
            state.value = state.value + action.payload;
        },
        down: (state, action)=>{
            state.value = state.value + action.payload;
        }
    } 
});
export const {up} = counterSlice.actions;
export const {down} = counterSlice.actions;
export default counterSlice;

reducers 안에 up, down 액션 타입이 존재한다. 이들의 기능은 각각 2씩 증가하거나 감소하면서 값이 바뀌어야 하는 것이다. 그렇기 때문에 state의 value를 바꾸기 위해서, 밑과 같은 코드를 작성했다.

state.value = state.value + action.payload;

---

2. configureStore 를 이용하여 store 생성

import {configureStore} from '@reduxjs/toolkit';
import counterSlice from "./counterSlice";

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

export default store;

counterSlice 안에 있는 up, down을 모은 것이 counterSlice.reducer이다. counterSlice.reducer를 "counter에 대한 reducer야 ~" 하고 configureStore의 reducer로 전달한다.

---

3. store을 Provider에게 전달

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

📢 index.js에 추가해도됨 !!

• import { Provider } from "react-redux"; 구문 추가
• import configureStore from "./store.js" 구문 추가
  (🚨 밑에 사진에는 없지만 추가해줘야 한다.)
• render 안에 Provider로 App을 감싸준다
  

Provider를 App에 감싸주면 Store에서 작성한 State 상태들을 앱에 안에 연결되어있는 Component들이 뽑아서 사용하는 것을 가능하게 해준다.

---

4. Counter 컴포넌트 생성

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

return state.couter.value;에서 counter은 counterSlice의 name이다. 이때 const count의 값은 couterSlice의 initialState의 초기값이 된다.

🔎 원래는 밑과 같은 코드를 작성했지만 손이 많이 간다. Redux Toolkit에서는 up, down과 같은 리듀스 함수들을 참조하여 자동으로 액션을 만들어낸다.

 <button onClick= {()=>{dispatch({type:'counter/up', stpe:2});}}>
   + 
 </ button>

🤔 How to do?

 <button onClick= {()=>{dispatch(counterSlice.actions.up(2);}}>
   + 
 </ button>

이렇게 코드를 수정하고 up에 가서 console.log(action)을 하면 콘솔에 payload : 2 라고 뜨는 것을 볼 수 있다.

이렇게 자동으로 액션을 만들어내는 것을 선택 했다면, 밑과 같이 수정하고

 <button onClick= {()=>{dispatch(up(2);}}>
   + 
 </ button>

추가로 counterSlice에서 state.value = state.value + action.payload;로 수정한다.

---

5. App( )에 counter 컴포넌트를 추가해준다.

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