[Redux-toolkit] configureStore, createSlice

redux를 사용하면서
reducers 디렉토리에는 많은 파일을 생성해뒀었다..
action만 있는 types.js
reducer가 있는 reducer.js
reducer를 combine할 index.js
등등..

작성하다 훅 워닝이 떠서 수정하던 중 console에서 redux-toolkit을 추천해줘서 알게됐다!
훅 규칙 위반한 걸 쉽게 수정할 수 있지않을까 싶어서 알아봤더니
완전! 신세계가 있었다!!!!

👀 참고 블로그!!!! 설명을 정말 너무 잘 해주셔서 이해하기 너무 편했다 ㅜㅜ!정말.. 제 은인이시다..

1. reducers/store.js

그 동안은 src/index.js에

const store = createStore(reducer);

로 reducer를 담은 store를 생성했었다.

그 대신 reducers/store.js를 생성했다.

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

export default configureStore({
    reducer: {
        test : testReducer
    },
})

위처럼 configureStore에 사용할 reducer를 모두 넣어준다!

2. src/index.js

import store from './reducers/store';

store를 생성하지않고 import해준다.
그 외에는 전과 같이 Provider에 store를 주고 < App />을 감싸준다.

3. reducers/testReducer.js

리듀서를 생성한다! 여기가 너무 신세계😲

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

const initialStateValue = {token: ""};

const testSlice = createSlice({
    name: "test",
    initialState: { value: initialStateValue},
    reducers:{
        login: (state, action) => {
            state.value = action.payload
        }
    },
})

name은 리듀서의 이름이고
initialState는 state의 초기값이다!
reducers 안에는 액션에 따른 코드가 있다.
key값이 action type이다.

export const { login } = testSlice.actions;

export default 윗 줄에 위 코드처럼 action type을 export 해줘야 한다!

만들어진 reducer들은 store.js 안에 명시되어야한다!

그 외에는 redux-toolkit을 사용하지 않을 때와 같이
useDispatch, useSelector를 사용하면서 state를 수정하고 참조하면 된다!!

정말 너무 ~~~ 좋군