1. 라이브러리 설치

npm i redux react-redux @reduxjs/toolkit 

2. 리덕스 구성

2.0 리덕스 연결

: redux를 사용하려면 store에 reducer를 넣고, reducer에 slice를 넣는다. 그 후 Provider를 통해 앱을 감싼뒤 useDispatch를 사용해 state를 조작할 수 있다.

// App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/store';

function App() {
  	return (
		<Provider store={store} >
      		// 무언가
      	</Provider>    
    )
}

Provider 을 가져와 앱을 감싸주고, store속성에 store을 넣어줌.

2.1 store

: reducer를 보관하는 곳

// ./src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducer';

const store = configureStore({
	reducer: rootReducer,
})
export default store;

configureStore로 store을 만들고 그 안에 미리 정의된 reducer를 넣어준다. 즉, reducer를 모아놓은 공간

2.2 reducer

// ./src/store/reducer.ts
import { combineReducers } from 'redux';
import userSlice from '../slice/user';

const rootReducer({
	user: userSlice.reducer,
})

export default rootReducer;

combineReducers를 사용해 reducer를 만들고 미리 정의된 slice를 넣어준다. 즉, slice를 관리하는 공간

2.3 slice

: 로그인, 회원가입을 위한 userSlice를 만들어보겠습니다.

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

const initialState = {
	name: '',
  	email: '',
  	accessToken: '',
  	refreshToken: '',
}

const userSlice = createSlice({
	name: 'user',
  	initialState,
  	reducer: {
    	setUser(state, action) {
        	state.name = action.payload.name;
          	state.email = action.payload.email;
          	state.accessToken = action.payload.accessToken;
          	state.refreshToken = action.payload.refreshToken;
        },
    },
  extraReducers: builder => {
  	return null
  }
})

export default userSlice;

slice는 createSlice를 만들어 slice이름과 초기state를 정의하고 reducer를 작성한다.
extraReducers는 비동기함수를 위한 공간이다. 나중에 다시 작성하겠습니다.

정리

redux를 사용하려면 store를 Provider에 넣고 앱을 감싼뒤 slice를 만들어 reducer에 넣고 reducer를 store에 넣으면 됨!