Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210702 Redux08 : redux-toolkit 사용법, createAction, createReducer, createSlice(reducers, extraReducers 작성법들), configureStore, createAsyncThunk

7 분 소요

Redux 08





redux-tookit 사용법


createAction, createReducer 방식


  • store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식
  • 하지만, 크게 코드가 줄어 들진 않음


createAction()


  • redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다.
  • 기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서 type, payload 형태의 Actoin을 만들어줌
import { createAction } from "@reduxjs/toolkit";

const getUsersStart = createAction("GET_USERS_START");
const getUsersSuccess = createAction("GET_USERS_SUCCESS");
const getUsersFail = createAction("GET_USERS_FAIL");

console.log(getUsersStart, getUsersSuccess, getUsersFail);
// 단지 변수 명으로 사용시 -> function return

console.log(getUsersStart.type, getUsersSuccess.type, getUsersFail.type);
/* Type을 붙여서 사용시 -> Type return
GET_USERS_START GET_USERS_SUCCESS GET_USERS_FAIL */

console.log(getUsersStart(), getUsersSuccess(), getUsersFail());
/* 함수 호출로 사용시 -> action return (액션의 경우 어쨌거나, payload와 함깨 보내짐)
{ type: 'GET_USERS_START', payload: undefined } 
{ type: 'GET_USERS_SUCCESS', payload: undefined } 
{ type: 'GET_USERS_FAIL', payload: undefined } */



createReducer()


  • 원래의 Reducer 사용방식은 기존의 state를 복사해서 새로운 state를 만들어서 기존 것을 넣고 변경된 내용을 덮어 쓰는 형태 였음


  • createReducer를 사용하면,
    • 복사해서 새로운 state를 만들어 return 해줄 필요 없이(구조 분해 할당으로 기존 state 할당해줄 필요 없이), mutate 하게 push()로 state의 변경되는 요소만 변경 시킬 수 있음 (push는 어떤 것도 return 하지 않음)
    • 물론, 새로운 state Object를 return 시켜도 상관 없음
    • switch 구문 필요 없음


  • createReducer(defaultState, reducerMap)
    • defaultState : 앱 처음 실행시, store의 state에 기본적으로 세팅된 state 구조 및 값
    • reducerMap: {} 객체 형태로 여러 reducer를 묶어 사용함
      • actionCreator를 []로 감싸서 "computed property syntax" 를 사용함 (MDN :computed property syntax)
        • computed property syntax는 property의 이름을 밖의 변수를 참조시커나, 연산 할수 있게 하여 동적인 property 명을 가질 수 있게 함
      • push 방식, return 방식 둘다 지원함
        • push : 전개 연산자를 사용할 필요가 없음, 어떤 것도 return 하지 않음
        • return: 전개연산자를 사용해 주어야 함, return 형식으로 해줘야 함
      • action에서 전달하는 데이터는 payload를 통해서 가져다 지정할 수 있음
  • 해당 방식을 사용하면, 기존에 사용하던 redux-thunk 함수를 그대로 호환해서 사용할 수 있음


// actionCreator
import {createAction} from '@reduxjs/toolkit'
const getUsersStart = createAction('GET_USERS_START');
const getUsersSuccess = createAction('GET_USERS_SUCCESS');
const getUsersFail = createAction('GET_USERS_FAIL');

// Reducer (Before using createReducer of Redux-Toolkit)
const initialState = {
	loading: false,
	data: [],
	error: null,
};
const reducer = (state = initialState, action) => {
	switch (action.type) {
		case getUsersStart.type:
			return { ...state, loading: true };
		case getUsersSuccess.type:
			return { ...state, loading: false, data: action.payload };
		case getUsersFail.type:
			return { ...state, loading: false, error: action.payload };
		default:
			return state;
	}
};

export default reducer;

// ------------------- After ------------------------------------

// Reducer (After using createReducer of Redux-Toolkit)
import {createReducer} from '@reduxjs/toolkit'

const initialState = {
	loading: false,
	data: [],
	error: null,
};
const reducer = createReducer(initialState, {
  // push() 방식
	[getUsersStart]: (state) => {
		state.push({ loading: true });
	},
  // return 방식
	[getUsersSuccess]: (state, action) => ({...state, loading: false, data: action.payload });
	,
	[getUsersFail]: (state, action) => {
		state.push({ loading: false, error: action.payload });
	},
});

export default reducer;

// Thunk ActionCreator - createReducer 방식과 그대로 호환 됨
export function getUsersThunk() {
	return async (dispatch, getState) => {
		try {
			dispatch(getUsersStart());
			const res = await axios.get('https://api.github.com/users');
			dispatch(getUsersSuccess(res.data));
		} catch (error) {
			dispatch(getUsersFail(error));
		}
	};
}




Slice


configureStore()


  • 기존의 createStore를 대체해서 configureStore() 사용하면, Thunk, dev tool까지 자동으로 연결해줌
  • 주의 할 점은, configureStore에 넣을 인자인 rootReducer 형태를 객체로 {reducer: rootReducer}로 만들어 주어서 넣어 주어야 함 그리고 property명은 reducer로 무조건 해줘야 함
import rootReducer from "./modules/reducer";
import { configureStore } from "@reduxjs/toolkit";

// const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
const store = configureStore({
  reducer: rootReducer,
});

export default store;


  • rootReducer를 reducer이름으로 사용하면 property와 이름이 같아져서 객체 단축 표현으로 {reducer}로 사용할 수 있음
import reducer from "./modules/reducer";
import { configureStore } from "@reduxjs/toolkit";

// const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
const store = configureStore({ reducer });

export default store;
  • rootReducer를 연결할 때는 대신에 해당 slice의 reducer로 출력해서 연결해줘야 함
    • slice의 경우 reducer와 action을 모두 포함하고 있기 때문에 정확하게 reducer를 연결해 줄 필요가 있음
import { combineReducers } from "redux";
import users from "./users1";

const reducer = combineReducers({
  users: users.reducer,
});
// 애초에 slice를 users.reducer로 export default하면 그냥 reducer 모양으로 받아서 넣을 수 있음

export default reducer;




createSlice()

  • createSlice는 하나의 slice 객체를 인자로 받음
  • slice 객체는 {name, initialState, reducers, extraReducers}로 구성되어 있음
    • name: string을 넣어서 prefix로 사용
    • initialState: defaultState가 들어감, (변수를 initialState로 지정하면, 단축으로 작성할 수 있음)
    • reducers: slice 안에서 사용할 reducer 들을 만들수 있음, 해당 reducer들을 만들면 자동으로 slice.action에 reducers에서 만든 reducer에 대한 actionCreator 함수가 들어 있음
    • extraReducers: slice에서 만들어진 reducers에 의한 action, reducer가 아닌 외부에서 만들어진 action을 통해 현재 slice에서 사용하는 initialState에 변경을 가하는 경우 처리받는 reducer임 (비동기 작업 함수 처리 등에 사용됨)


reducers 작성법 2가지


  • reducer를 작성시 처리하는 방식은 2가지가 있다.
    • 방법1(함수, 직접 할당 방식): 직접 값을 변경하는 방식으로 기존 값에 변경을 주는 함수를 사용하거나, 할당을 이용
      • js에서 사용하는 기존값에 변경을 가하는 Array 함수 등인 push 등이 있겠다.
      • 초기 자료구조가 어떻게 되어 있는지에 따라 변수에 사용할수 있는 함수는 달라지겠다.
      • 주의할점은, 집어 넣는 값과 기존의 자료구조가 어떻게 되어 있는지 조심해야한다.
        • payload 자체로 보내기 때문에 reducer에서 값을 어떻게 받게 할 것인지 조심해야 함
    • 방법2(복사 return 방식): 기존에 사용하던 방식으로, return을 주어 기존의 state는 복사하여 가져오고 변경된 값만 덮어 씌우는 형식으로 지정
      • 일단, state 전체를 바꾸는 거라서 오히려 전체구조를 그리면서 할수 있어서 어떻게 들어가는지 함수 고려를 하지 않아도 됨
      • 하지만, ...state를 사용해서
// defaultState
const initialState = {
  loading: false,
  data: [],
  error: null,
};

// slice reducers 방법01 : 있던 값을 바꾸는 형식 (state에 직접적으로 변경을 가함, 함수방식)
// 직접 변경을 가하기 때문에 기존값을 풀어써주는 전개 연산자가 필요가 없음
const users = createSlice({
  name: "usersReducer",
  initialState,
  reducers: {
    getUsersStart: (state, action) => {
      state.loading = true;
    },
    getUsersSuccess: (state, action) => {
      state.loading = false;
      state.data = action.payload;
    },
    getUsersRemove: (state, action) => {
      state.loading = false;
      state.data = [];
    },
  },
  extraReducers: {},
});
export const { getUsersRemove, getUsersSuccess, getUsersStart } = users.actions;

// slice reducers 방법02 : 기존 state를 복사하여 새로운 값을 만들어서 state에 세팅하는 방식(return 방식)
// 기존 값을 가져와 반영해야 함으로 전개연산자 필요
const users = createSlice({
  name: "usersReducer",
  initialState,
  reducers: {
    getUsersStart: (state, action) => ({ ...state, loading: true }),
    getUsersSuccess: (state, action) => ({
      ...state,
      loading: false,
      data: action.payload,
    }),
    getUsersRemove: (state, action) => ({
      ...state,
      loading: false,
      data: [],
    }),
  },
  extraReducers: {},
});
export const { getUsersRemove, getUsersSuccess, getUsersStart } = users.actions;


extraReducer 작성법 2가지


  • 자신이 구현한 외부 비동기 작업 함수 사용시 사용되며, 외부에서 만들어진 action을 처리하기 때문에 외부에서 만들어진 함수를 property이름으로 사용하고, 자동으로 pending, fulfilled, rejected의 type을 가지 action을 구현해줌
  • 그래서 pending fulfilled, rejected 에 맞게 extraReducers를 작성하면됨


  • map Object notation 방식 - return 방식 or 함수,할당 방식
  • builder callback notation 방식 - return 방식 or 함수,할당 방식


01 : map Object notation 방식 - return 방식 or 함수,할당 방식


// defaultState
const initialState = {
  loading: false,
  data: [],
  error: null,
};

// Slice extraReducers
// 방식1: map Object notation
// 1. return 방식 (전개 연산자 필요)
const users = createSlice({
  name: "usersReducer",
  initialState,
  reducers: {},
  extraReducers: {
    [getUsersThunk.pending]: (state, action) => ({
      ...state,
      loading: true,
    }),
    [getUsersThunk.fulfilled]: (state, action) => ({
      ...state,
      loading: false,
      data: action.payload,
    }),
    [getUsersThunk.rejected]: (state, action) => ({
      ...state,
      loading: false,
      error: action.error,
    }),
  },
});

export default users;


// 방식1: map Object notation
// 2. 함수 및 할당 방식 (전개 연산자 불필요)
const users = createSlice({
	name: 'usersReducer',
	initialState,
	reducers: {},
	extraReducers: {
		[getUsersThunk.pending]: (state, action) => {
			state.loading = true;
		},
		[getUsersThunk.fulfilled]: (state, action) => {
			state.loading = false;
			state.data = action.payload;
		},
		[getUsersThunk.rejected]: (state, action) => {
			state.loading = false;
			state.error = action.error;
		},
	},
});

export default users;



02 : builder callback notation 방식 - return 방식 or 함수,할당 방식


// defaultState
const initialState = {
  loading: false,
  data: [],
  error: null,
};

// 방식2: builder callback notation
// 1. return 방식 (전개 연산자 필요함)
const users = createSlice({
	name: 'usersReducer',
	initialState,
	reducers: {},
	extraReducers: (builder) => {
		builder
			.addCase(getUsersThunk.pending, (state, action) => ({
				...state,
				loading: true,
			}))
			.addCase(getUsersThunk.fulfilled, (state, action) => ({
				...state,
				loading: false,
				data: action.payload,
			}))
			.addCase(getUsersThunk.rejected, (state, action) => ({
				...state,
				loading: false,
				error: action.error,
			}));
	},
});

export default users;

// 방식2: builder callback notation
// 2. 함수 및 할당 방식 (전개 연산자 불필요)

const users = createSlice({
	name: 'usersReducer',
	initialState,
	reducers: {},
	extraReducers: (builder) => {
		builder
			.addCase(getUsersThunk.pending, (state, action) => {
				state.loading = true;
			})
			.addCase(getUsersThunk.fulfilled, (state, action) => {
				state.loading = false;
				state.data = action.payload;
			})
			.addCase(getUsersThunk.rejected, (state, action) => {
				state.loading = false;
				state.error = action.error;
			});
	},
});

export default users;




createAsyncThunk(): 비동기 작업 함수 작성


  • slice로 구현한 state를 변경하려면, 기존의 react-thunk 사용방식으로는 안됨
  • toolkit에서 제공하는 createAsyncThunk()를 활용해서 비동기 작업을 구현할 수 있음
  • redux-toolkit 공식 문서: createAsyncThunk
  • createAsyncThunk(type, payloadCreator, options)
    • type: 해당 요청의 type명으로, prefix를 포함해서 작성해 주어야 한다. (pending, fulfilled, rejected는 알아서 상황에 맞게 붙여짐으로 고려하지 않아도 됨)
    • payloadCreator: actionCreator로 payload와 함께 보내져 요청되는 비동기 함수 실행 부분 (인자 두개를 받음)
      • arg: 첫번째 파라미터로 지정하면, actionCreator를 사용하면서 보낼 payload(인자)를 받아 실행하고자 하는 비동기 함수를 구성하는데 사용될 사용자 입력으로 활용할 수 있음
      • thunkAPI: dispatch, getState, rejectWithValue, fulfillWithValue 등의 함수를 실행 할수 있는 API 묶음
  • 기본적으로 해당 함수의 return 값은 fulfilled로 처리하여 payload로 보내지고, error는 thukAPI,rejectWithValue(error)를 통해서 받아 action.error로 보내짐 
// createAsyncThunk : Thunk 비동기 작업
export const getUsersThunk = createAsyncThunk(
  "users/getUsersThunk",
  async (thunkAPI) => {
    try {
      const res = await axios.get("https://api.github.com/users");
      return res.data;
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

const initialState = {
  loading: false,
  data: [],
  error: null,
};

const users = createSlice({
  name: "usersReducer",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUsersThunk.pending, (state, action) => {
        state.loading = true;
      })
      .addCase(getUsersThunk.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(getUsersThunk.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error; // action.error인 것을 주의
      });
  },
});

export default users;

참고