React_Redux-toolkit

오늘 배운 것

• Redux-toolkit

Redux-toolkit 사용법

1. 라이브러리 설치

redux/toolkit과 react-redux 설치

• npm

  npm i @reduxjs/toolkit react-redux

• yarn

  yarn add @reduxjs/toolkit react-redux

2. 디렉토리 구조

• Redux와 같은 디렉토리 구조로
  src 폴더 안에 store 폴더, modules 폴더를 만든다.
  
  

3. store 셋팅

• 일반 redux는 createStore() 또는 legacy_createStore()를 사용했다면
  redux/toolkit은 configureStore() 를 사용한다.

</store/store.js>

import { configureStore } from "@reduxjs/toolkit";
import todos from "../modules/todos"; // js 파일 자체 import

// store 셋팅 - 인자는 객체를 주고 그 안에 reducer 객체를 가진다.
const store = configureStore({
  reducer: {
    todos
  }
})

// index.js에서 주입해야 하니 export를 해주자
export default store

4. module 셋팅

일반 redux와 redux/toolkit의 가장 큰 차이는 module의 작성이다.

• redux는 Action Value, ActionCreator, Reducer, initialState를 따로 작성했지만

• redux/toolkit은 createSlice() 메서드 안에 reducer와 action Creator가 담긴다.
  (Action Value는 사용 안 함)

[ TodoList 예시 ]

</modules/todos.js>

// 초기 값
const initialState = [];

// todo의 actionCreator, reducer가 담긴 slice 세 개의 속성을 기본적으로 갖는다.
// name, initialState, reducers
const todoSlice = createSlice({
	name: 'todoSlice',
  	initialState: initialState
  
  	reducers: { // reducers는 객체의 형태로 action Creator를 가진다.
      // actionCreator 메서드를 정의
    	addTodo: (state, action) => {
          state.push(action.payload)
        },
		deleteTodo: (state, action) => {
        	state.filter(todo => todo.id !== action.payload)
        }
	}
})

// reducer와 actionCreator export
export default todoSlice.reducer
export const {addTodo, deleteTodo} = todoSlice.actions

5. index.js에서 주입

<index.js>

import { Provider } from 'react-redux';
import store from './redux/store/configStore';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <Provider store={store}> // 오리지널 Redux와 같이 주입
      <Router />
    </Provider>
  </React.StrictMode>
);

6. 사용법

• 오리지널 Redux와 똑같이 작동한다.
• useSelector로 state를 가져오고
  dispatch(actionCreator()) 를 호출하여 state를 업데이트 한다.

// configureStore()의 reducer 중 todos를 가져오겠다는 뜻
const reduxTodo = useSelector((state) => state.todos);
// actionCreator 사용할 때 필요한 dispatch
const dispatch = useDispatch();
  
// todos 모듈의 initialState가 빈 배열이라서 빈 배열로 잘 뜬다.
console.log(reduxTodo); // [] 

  const handleSubmit = (e) => {
    e.preventDefault();
    const task = { id: uuid(), title, content, isDone: false };
    // actionCreator를 작동시켜 task를 state에 push
    dispatch(addTask(task)); 
    setTitle("");
    setContent("");
    initRef.current.focus();
  };

획기적인 toolkit의 기능

Immer

state변경 시 Immer라는 내장 된 기능을 통해
불변성을 지키기 위한 작업들을 많이 단축시킬 수 있게 되었다.

Redux devTools

Redux로 작업 된 사이트에서 사용할 수 있는 Tool
state의 여러 상세작업 사항들을 추적 할 수 있다

느낀점

• 일반 Redux에 익숙해진 탓일까
  손에 잘 안 익어서 todolist를 바로 만들어봤다.
  아직은 실감나지 않지만,
  큰 프로젝트이고 다뤄야 할 전역 상태가 많아진다면
  타이핑 하는 양이 확실히 줄어들긴 하겠다.