Redux Toolkit

Redux 
- React와 무관한 상태관리자

React Redux 
- React & Redux 통합

Redux Toolkit
- Redux를 보다 수월하게 이용하게 해주는 도구

Redux Toolkit 너는 왜 태어났니?

• 설정할게 너무 많습니다.
• 미들웨어 설치가 복잡합니다.
• 반복되는 코드가 너무 많습니다.
• 순수 자바스크립트로 불변성 유지가 너무 어렵습니다.

---

Redux Toolkit 사용법

npm install @reduxjs/toolkit
npm install react-redux

작은 store이 모이면? → slice
slice들이 모이면? → 큰 store

 configureStore()

• createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공합니다.
• 내가 만든 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 내가 지정한 미들웨어들을 더해주고, Redux DevTools 확장(구글 확장 프로그램)을 사용할 수 있게 합니다.

createReducer()

• switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 합니다.
• 여기에 더해 immer 라이브러리를 자동으로 사용해서, state.todos[3].completed = true와 같은 변이 코드를 통해 간편하게 불변 업데이트를 할 수 있도록 합니다. (불변성 유지를 안해도 되는 이유!)

createAction()

• 주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어줍니다.
• 함수 자체에 toString() 정의가 포함되어 있어서, 타입 상수가 필요한 곳에 사용할 수 있습니다.
  • 만들어진 action 함수 안에는 type과 payload가 담겨 있다. 
  • ex) createAction("ADD") → {type: 'ADD', payload: undefined} type은 ADD가 되고, dispatch로 받아온 값들이 payload에 담기게 된다. 
  • 이 때, 2개 이상의 payload를 할당하는 경우? → 1개의 경우 dispatch(TodoAdd(text)) 작성 / 2개의 경우 dispatch(TodoAdd({text,id}) 전달인자에 객체로 묶어 전달하면 객체처럼 사용 가능 text: action.payload.text, id:action.payload.id
• createSlice라는 기능 대신 사용 추천!! 이 기능을 사용하면 createAction을 통해 따로 액션타입을 정의하지 않아도 자동으로 액션타입을 만들어줍니다.

const increment = createAction("INCREMENT");
const decrement = createAction("DECREMENT");

function counter(state = 0, action) {
  switch (action.type) {
    case increment.type:
      return state + 1;
    case decrement.type:
      return state - 1;
    default:
      return state;
  }
}

const store = configureStore({
  reducer: counter
});

document.getElementById("increment").addEventListener("click", () => {
  store.dispatch(increment());
});

createSlice()

• 조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어줍니다.
• 액션에 대한 함수 설정과 리듀서를 따로 생성 안해도 됨!

createAsyncThunk

• 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성해줍니다.

createEntityAdapter

• 저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어줍니다.

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

const counterSlice = createSlice({
	name: 'in',
	initialState: {value:0},
	reducers:{
		up:(state,action)=>{
			//state.value = state.value + action.step;
			state.value = state.value + action.payload; //counterSlice.actions를 쓸때
		}
	}
});

//store 만들기
const store = configureStore({ 
	reducer: { //각각의 슬라이스의 리듀서
		counter: counterSlice.reducer //counterSlice안의 reducers들을 하나로 합쳐주는 하나의 reducer 생성
	}
});
 
function Counter(){
	const dispatch = useDispatch();
	const count = useSelector(state=>{
		return state.counter.value
	});
	return <div>
		<button onClick={()=>
			//dispatch({type:'counterSlice/up', step:2});
			dispatch(counterSlice.actions.up(2)) //counterSlice.actions를 쓸때
		}}>+</button> {count}
	</div>
}

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

---

두 개 이상의 reducer를 쓸 때

예시 🔽

• src/store.js

import { configureStore } from "@reduxjs/toolkit";
import LoginState from "./LoginSlice";
import ModalState from "./ModalSlice";

export const store = configureStore({
    reducer: {
        Login: LoginState.reducer, //key:value가 있는 객체 형식이어야함!
        Modal: ModalState.reducer, //이때 value는 reducer가 들어옴!
    },
});

export default store;

• src/ModalSlice.js

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

const initialState = {
    isModal: false,
};
const ModalState = createSlice({
    name: "modalstate",
    initialState,
    reducers: {
        modalOpen: (state) => {
            state.isModal = true;
        },
        modalClose: (state) => {
            state.isModal = false;
        },
    },
});

export const { modalClose, modalOpen } = ModalState.actions; //reducers전달

export default ModalState;

• src/LoginSlice.js

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

const initialState = {
    isLogin: false,
};
const LoginState = createSlice({
    name: "loginstate",
    initialState,
    reducers: {
        login: (state) => {
            state.isLogin = true;
        },
        logout: (state) => {
            state.isLogin = false;
        },
    },
});

export const { login, logout } = LoginState.actions; //reducers전달

export default LoginState;

---

useDispatch & useSelector 적용법

useSelector()
- 리덕스의 상태를 조회할 수 있습니다. 
- store에서 현재 상태 값을 가져옵니다.

useDispatch()
- 생성한 액션을 발생시키며, 액션 생성 함수를 가져옵니다.
- 변경되는 값을 store로 전달합니다.

• useDispatch()

export default function LoginModal({ isModal }) {
    const dispatch = useDispatch();

const onValid = async (data) => {
        try {
            await axios
                .post("http://localhost:3001/login", data)
                .then((data) => {
                    closeModal();
                    dispatch(login()); //dispatch 적용! (전달인자는 상태 변화를 주는 action함수)
                    Toast.fire({
                        title: "로그인 성공!",
                        icon: "success",
                        customClass: {
                            icon: "icon-class",
                            container: "my-swal",
                        },
                    });
                });
        } catch (error) {
            console.error(error);
        }
    };

• useSelector()

const isLogin = useSelector((state) => state.Login.isLogin);
const isModal = useSelector((state) => state.Modal.isModal);

<ConfirmButton onClick={
     isLogin? handleConfirm : () => dispatch(modalOpen())}
     isModal={isModal}
> 
예약하기
</ConfirmButton>