現代 React 與 Redux

本文重點介紹現代 React，重點是將 Redux 整合到 React 應用程式中以進行狀態管理。我將介紹一些高級 React 功能，例如 useCallback 和有用的 VS Code 擴展，以提高工作效率。

概念亮點：

1. mapStateToProps
2. mapDispatchToProps
3. 將 Redux 加入 React 的好處
4. Redux Thunk
5. 減速器
6. 選擇器
7. VS Code 中的 React 程式碼段

1.mapStateToProps

在 Redux 中，mapStateToProps 是一個函數，可讓您將 Redux 儲存中的狀態對應到 React 元件的 props。這允許組件存取特定的狀態。

文法：

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

例如） 在此範例中，mapStateToProps 從 Redux 儲存中提取計數值，並將其作為 CounterComponent 內的 prop 提供。

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2.mapDispatchToProps

與mapStateToProps類似，mapDispatchToProps將調度動作對應到props，使元件能夠將動作調度到Redux儲存。

文法：

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

例如） 在此範例中，mapDispatchToProps 提供incrementCount 作為CounterComponent 的道具，允許它在呼叫時分派increment() 操作。

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. React 添加 Redux 的好處

Redux 可以顯著改進您的 React 應用程序，尤其是當應用程式變得越來越複雜時。以下是主要好處：

• 集中狀態管理：Redux 透過在集中儲存中管理狀態來提供單一事實來源。這使得管理整個應用程式的狀態變更變得更加容易，並提高了可預測性。

• 狀態持久化：Redux 可以更輕鬆地在頁面重新載入或路由之間保存和持久化狀態，從而使用戶體驗更加流暢。

• 調試和時間旅行調試：Redux DevTools 允許進行高級調試，並讓您檢查每個操作和狀態更改，甚至返回到之前的狀態來修復錯誤。

• 關注點分離：Redux 將應用程式的狀態與 UI 分離，從而實現更多可重複使用、可維護和可測試的程式碼。

4.Redux 重擊

Redux Thunk 是一個中間件，允許編寫傳回函數而不是操作物件的操作建立器。這使我們能夠在 Redux 操作中執行非同步操作（如 API 呼叫）。

文法：

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

例如） 在此範例中，fetchPosts 是一個非同步操作，它從 API 取得資料並根據請求的成功或失敗來分派操作。

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. 減速機

Reducers 是 Redux 中的純函數，它將當前狀態和操作作為參數，並根據操作傳回新狀態。減速器負責更新 Redux 儲存中的狀態。

文法：

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

例如） 在此範例中，counterReducer 處理兩個操作：INCREMENT 和 DECRMENT，並相應地更新狀態中的計數。

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. 選擇器

選擇器 是用於從 Redux 儲存中提取或計算派生狀態的函數。它們透過記憶結果來提高效能，並提供清晰的 API 來存取部分狀態。

文法：

const selectCount = (state) => state.counter.count;

例如） 在此範例中，selectUserPosts 是記憶選擇器，它根據目前使用者的 ID 過濾貼文。選擇器可以透過避免不必要的重新計算來提高程式碼效率。

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. VS Code 中的 React 程式碼片段

如果您在 VS Code 中進行編碼，安裝 React Snippets 擴充功能可以大大加快您的工作流程。此擴充功能提供了創建元件、掛鉤和其他常見 React 程式碼結構的便捷快捷方式，幫助用戶利用程式碼模板更快地編寫乾淨且一致的 React 程式碼。

例如）嘗試 rfc、rafc 或 rafce 後面跟著 Tab 鍵將為 React 功能元件產生以下程式碼：

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

以上是現代 React 與 Redux的詳細內容。更多資訊請關注PHP中文網其他相關文章！