Redux toolkit

도구들의 관계 Redux & React Redux & Redux toolkit

Redux 는 상태관리 라이브러리입니다. 리액트뿐만 아니라 바닐라js에서도 쓸 수가 있죠
createStore, getState, dispatch 와 같은 기능을 포함합니다.

React Redux 를 사용하면 Redux를 React에서도 사용하기 쉽게 만들어줍니다. useDispatch랑 useSelector와 같은 hook을 지원해줍니다.

Redux tookit 는 보다 다양하고 쉽게 Redux를 사용할 수 있도록 만들어줍니다.

Redux tookit 발생 이유

기존의 Redux 는 설정할게 많고, 미들웨어 설치가 힘들고, 불변성유지가 힘들고, 반복되는 코드가 많습니다
이를 해결하기 위해 미리 셋팅이 정해진 Redux라고 생각할 수 있습니다.

App.js 코드 확인

import React from "react";
import {createStore} from 'redux';
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.counter.value;
  });
  return <div>
    <button onClick={()=>{
      dispatch(up(2));
    }}>+</button> {count}
  </div>
}
export default function App() {
  return (
    <Provider store={store}>
      <div>
        <Counter></Counter>
      </div>
    </Provider>
  );
}

일단 함수 App에는 return 을 provider 로 감싸고 있고 store가 포함돼있습니다.

그리고 함수 Counter에는 숫자를 올려주는 함수(dispatch(up))을 포함한 + 버튼과 숫자 값 {count}를 리턴해주고 있습니다.

count는 useSelector를 사용해서 할당 받고, dispatch 함수는 useDispatch를 통해 할당 받습니다.
둘다 리덕스의 기능을 사용했습니다.

counterSlice.js 코드 확인

import {createSlice} from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name:'counterSlice',
  initialState:{value:0},
  reducers:{
    up:(state, action)=>{
      state.value = state.value + action.payload;
    }
  }
});
export default counterSlice;
export const {up} = counterSlice.actions;

createSlice는 Redux Toolkit의 주요 기능입니다. 작은 store를 만들어 준다고 생각하면 됩니다.
initialState 안에는 초기값이 들어있고, reducers 안에는 dispatch를 이용해서 사용할 함수가 들어있습니다.

actionCreator 함수를 자동으로 만들어 줍니다. 그렇기에 counterSlice.actions을 동작시킬 수 있고, 해당 값은 payload라는 값으로 입력됩니다.

store.js

import {configureStore} from '@reduxjs/toolkit';
import counterSlice from './counterSlice';
const store = configureStore({
  reducer:{
    counter:counterSlice.reducer
  }
});
export default store;

configureStore 를 사용하면 스토어(본체)를 만들 수 있습니다. 안에는 작은 스토어 (counterSlice 들이 들어가겠습니다) 이를 export 해주는 것이 주요 역할입니다.