리덕스 툴킷 redux toolkit #1 APIs

리덕스 공부하다가 마상입은 지난 날들을 떠울리며 툴킷 공부를 미루다가
그룹 프로젝트 구현직전이라서 더 이상 미룰 수 없는 리덕스툴킷 공부

정리한 내용은
1.리덕스 툴킷 독스를 기본으로 하고
https://redux-toolkit.js.org/introduction/getting-started
2.레퍼런스 자료로 보충함(마지막에 있음)

2줄 요약
1.리덕스보다 훨씬 간단함
2.먼저 API 공부하고 따라가는 게 좋음

Redux Toolkit includes these APIs

https://redux-toolkit.js.org/introduction/getting-started

첫 4개 위주로 공부하기

configureStore()wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.
리듀서 내용을 다 때려 넣고 한 방에 해결해주는 애
reducer 전달할 때 property name도 reducer로 쓴다.

// 리덕스 시절
const store = createStore(counter)

// 툴킷에서는
const store = configureStore({
  reducer: {
    language: languageReducer,
    user: userReducer,
    write: writeReducer,
  },
  devTools: ... ,
});

createReducer()that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the immer library to let you write simpler immutable updates with normal mutative code, like state.todos[3].completed = true.

리덕스 때 쓰던 switch문 다 사라짐
걍 reducer 함수를 나열해 놓으면 된다.
parameter 2개: initial State 와 reducer map 객체
payload 통해서 전달된 요소를 state에 직접 push함(immer 내장)
**상태값을 직접 변경하는 방식

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

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

reducers: {
  add: {
    reducer: (state, action) => {
      // 👇👇👇
      state.items.push(action.payload)
    },
  // ...
  },
},

createSlice()accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.
Action과 reducer 한꺼번에 정리해줌
reducer 이름 + initial state + action => obj로 하나로 전달

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

const store = configureStore({
  reducer: counterSlice.reducer
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(counterSlice.actions.increment())
})

createAction()
generates an action creator function for the given action type string. The function itself has toString() defined, so that it can be used in place of the type constant.
리덕스 때: 액션타입 생성함수 작성 ...
툴킷:
action 타입 문자열을 arguments =>
얘를 사용해서 생성자 함수 return 함

//리덕스 시절
const INCREMENT = 'counter/increment'

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

//툴킷
const increment = createAction("counter/increment");
let action = increment(); // returns { type: 'counter/increment' }

이 외에 아래 2개도 더 있으나 나중에 쓸 때 정리하려고 아껴둠...🙃
createAsyncThunk thunk 이용하는 얘인듯
createEntityAdapter reusable reducers and selectors 만들 때 쓴다고 함