ReduxキットRedux toolkit#1 API

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

整理した内容.
1.リドストッチ毒液をベースに
https://redux-toolkit.js.org/introduction/getting-started
2.参考資料として補足(最後)
2行の概要
1.Ridexよりずっと簡単
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.
Reduserの内容を全部入れて一気に解決する人.
reduceを渡す場合、property nameもreduceとして使用されます.

// 리덕스 시절
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.
リデスが使ったスイッチのドアが消えた
reduce関数をリストするだけでいいです.
2つのパラメータ:初期状態と減速機マッピングオブジェクト
負荷によって伝達された要素を直接ステータスにプッシュ(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.
動作と減速機の同時整理
reduce名+初期状態+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タイプ文字列をargument=>に変換
コンストラクション関数を返すには

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

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

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

それ以外にも次の2つがありますが、後で使うときに整理するために大切にしています...🙃createAsyncThunkドンを利用した子のようです.createEntityAdapter再利用可能なリストアおよびセレクタの作成