windsuzu / react-redux-demo Goto Github PK

A simple example of using redux in react, which contains reduxjs/toolkit and react-redux.
View Demo · Report Bug · Request Feature

以 UI 的 toggle shoppingCart 功能為例，開發時照著以下步驟導入 redux

1. createSlice
2. configureStore
3. Provider
4. [useSelector] [control JSX]
5. useDispatch

以 fetchCartData, sendCartData 功能為例，開發時可以選用下列三種方式導入 redux

這個方法將所有的網路處理邏輯寫在 App Component 當中。把 slice / store 保持得很乾淨，只有簡單的 state 與 action 處理；但對網路的處理 (等待、失敗、成功) 都寫在 App Component，讓 App Component 變得很雜亂。

• ASYNC CODE
  • App - fetchCartData
  • App - sendCartData
• NO ASYNC CODE
  • cartSlice
  • uiSlice

這個方法將網路處理邏輯分開寫在一個額外的檔案 cartAction 中，並且因為 thunk 的優點，可以繼續使用 dispatch 發送更新需求給 redux。 原本的 slice / store 完全沒改變，而且 App Component 變得很乾淨。

• ASYNC CODE
  • cartAction - fetchCartData
  • cartAction - sendCartData
• NO ASYNC CODE
  • cartSlice (no change)
  • uiSlice (no change)
  • App - fetchCartData (become no asnyc code)
  • App - sendCartData (become no asnyc code)

這個方法是 02-action-creator-thunk 的進階方法，使用 @redux/toolkit 的 createAsyncThunk 讓網路處理邏輯和 slice / store 變得更清楚。 因為 createAsyncThunk 會自動產生每個 function 的 pending、fulfilled 和 rejected 三個狀況，所以我們可以在 createSlice 中用 extraReducers 去操控每個 function 三個狀況需要改變的 state。

• ASYNC CODE
  • cartAction - fetchCartData (become leaner)
  • cartAction - sendCartData (become leaner)
• STATE CODE
  • cartSlice - fetchCartData [fulfilled]
  • uiSlice - fetchCartData [rejected]
  • uiSlice - sendCartData [pending, fulfilled, rejected]
• NO ASYNC CODE
  • App - fetchCartData (no change)
  • App - sendCartData (no change)

Distributed under the MIT License. See LICENSE for more information.

Reach out to the maintainer at one of the following places:

• GitHub discussions
• The email which is located in GitHub profile

• Maximilian Schwarzmüller