Redux Toolkit

redux-toolkit (RTK)

- redux 개발팀에서 2020년에 release한 라이브러리이고, 비동기통신에 필요한 thunk 미들웨어를 내장하고 있다.

- redux 작업을 단순화하고, 실수를 방지하며 redux앱을 만들기 쉽게 해줌

- immer library를 내장

- redux devtools extension을 기본으로 제공

 

 

주요 기능

- configureStore

- createAction

- createReducer

- createSlice

- createAsyncThunk

 

 

 

configureStore

- cerateStore 함수를 wrapping 한 함수로 configureStore를 제공한다.

- 기존에 reducer 함수를 합치는 과정을 진행하고, redux-thunk 및 redux devtools extension을 기본으로 제공한다.

 

//before
//composeWithDevTools => redux-devtools-extension
const store = createStore(rootreducer, composeWithDevTools());

//after
const store = configureStore({
	reducer:{
    	counter: counterReducer,
        todos: todosReducer,
    },
    devtools: ... ,
})

 

- reducer 전달 시, 꼭 reducer 라는 poperty name으로 전달해야 한다.

 

 

 

createAction

- action 타입 문자열을 인자로 받고, 해당 타입을 사용하는 액션 생성자함수를 return 한다.

(기존에는 액션 타입과 생성함수 모두를 작성했지만, createAction을 사용하면 모두 작성할 필요가 없다.)

 

// 기존: 액션 type과 생성함수를 모두 작성
const INCREMENT = 'INCREMENT'

function incrementOriginal() {
  return { type: INCREMENT }
}

console.log(incrementOriginal())
// {type: "INCREMENT"}

// `createAction` 사용:
const incrementNew = createAction('INCREMENT')

console.log(incrementNew())
// {type: "INCREMENT"}

 

 

 

createReducer

- switch문 작성할 필요 없이 reducer가 table lookup하여 action에 따른 적절한 reducer를 호출한다.

- 객체의 각 키는 redux의 action type 문자열, 값은 reducer 함수이다.

- createReducer은 두가지 파라미터를 전달 받는다. 첫번째는 초기 상태 값(initialState) 객체, 두번째 파라미터는 reducer 객체  

 

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

const counter = createReducer(0,{
    [increment]: state => state + 1;
    [decrement]: state => state - 1;
})

 

 

 

**createSlice**

- createSlice는 Action과 Reducer를 한번에 작성할 수 있다. (createaAction + createReducer)

 

//counter
const counterSlicer = createSlice({
	name="counter",
    initialState:0,
    reducers:{
    	increment: state => state+1,
        decrement: state => state-1,
    }
})

//store
const store = configureStore({
	reducer: {
    	counter: counterSlice,
    }
})

 

 

createAsyncThunk

- RTK은 비동기 통신을 위한 redux-thunk를 내장하고 있다. createActionThunk를 이용하여 비동기 통신을 처리할 수 있다.

- 두가지 파라미터를 받는다. 첫번째 인자는 action type이고 두번째 인자는 처리할 비동기 로직을 담은 callback함수이다.

- reducer에서 promise 시작, 성공, 실패에 따른 3가지의 action을 정의해 주어야한다.

 

 

---

 

Redux Toolkit