Day 11 - React「State Management」分享

15th鐵人賽

Vita Ora

2023-09-26 00:03:35

267 瀏覽

分享至

摘要

這篇文章的目的是 ?
React「State Management」分享
連結

這篇文章的目的是 ?

在現代的前端應用程式開發中，有效地管理應用程式的狀態（State）是至關重要的。State Management（狀態管理）是一個重要的議題，因為它關乎著應用程式的可維護性、擴展性和性能。我們分享這個State Management的資訊，是為了幫助台灣的前端開發者更好地理解和應用這一重要概念。

State Management的目的在於讓我們有效地管理應用程式中的數據和狀態，以確保應用程式的行為一致且易於維護。在這篇文章中，我們將討論幾種常見的State Management工具和技術，包括Context、Redux、Redux-Thunk、Zustand和Jōtai。

Context是React內建的一個State Management工具，它可以幫助我們在應用程式中共享狀態，而不需要一層層地將狀態作為prop傳遞。我們將提供程式碼範例和解釋，以展示如何使用Context來管理應用程式的狀態。

Redux是一個強大的State Management庫，它提供了一個單一的store來管理整個應用程式的狀態。我們將討論Redux的基本概念，並展示如何創建actions和reducers來處理應用程式的狀態變化。此外，我們還將介紹Redux-Thunk，一個用於處理異步操作的中間件，以及如何結合Redux和Redux-Thunk來處理複雜的狀態邏輯。

此外，我們還將介紹Zustand和Jōtai這兩個較新的State Management庫，它們提供了更簡單和現代的方法來管理應用程式的狀態。我們將提供程式碼範例和解釋，以示範如何使用這些庫來改進你的應用程式的狀態管理。

總之，本篇文章旨在幫助台灣的前端開發者更深入地理解State Management的重要性，以及如何使用不同的工具和技術來有效地管理應用程式的狀態。無論你是初學者還是有經驗的開發者，我們希望這篇文章能對你有所幫助，提高你在前端開發領域的技能水平。

React「State Management」分享

Context：

Context是React提供的內建State Management工具，它允許我們在應用程式中輕鬆地共享狀態。以下是一個簡單的範例，展示如何使用Context來共享和使用狀態：

import React, { createContext, useContext, useState } from 'react';

// 創建一個Context
const MyContext = createContext();

// Context提供器，用來設定共享的狀態
const MyProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {children}
    </MyContext.Provider>
  );
}

// 子組件中使用Context
const ChildComponent = () => {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

// 在應用程式中使用提供器包裹組件
const App = () => {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

export default App;

說明如何在同一個專案中集成Redux、Redux-Thunk和Redux Toolkit：

安裝相關套件： 首先，確保你的專案中已經安裝了Redux、Redux-Thunk和Redux Toolkit。

npm install redux redux-thunk @reduxjs/toolkit

設定Redux Store： 使用Redux Toolkit的**configureStore**函數來設定Redux store。此函數已經包括了Redux Thunk中間件。

// store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // 你的根reducer

const store = configureStore({
  reducer: rootReducer,
});

export default store;

建立Redux Slice： 使用Redux Toolkit的**createSlice**來定義reducer和actions。這可以大幅減少代碼量。

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

建立Redux Thunk Action： 如果你需要處理異步操作，你可以繼續使用Redux Thunk的action creators。Redux Thunk可以與Redux Toolkit共存。

// asyncActions.js
import { increment } from './counterSlice';

export const incrementAsync = (delay) => (dispatch) => {
  setTimeout(() => {
    dispatch(increment());
  }, delay);
};

在應用程式中使用： 最後，在你的React應用程式中，你可以將Redux store提供給你的應用程式，並使用Redux Toolkit生成的action creators。

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import { increment, decrement } from './counterSlice';
import { incrementAsync } from './asyncActions';

function App() {
  return (
    <Provider store={store}>
      <div>
        <p>Count: {store.getState().counter.value}</p>
        <button onClick={() => store.dispatch(increment())}>增加</button>
        <button onClick={() => store.dispatch(decrement())}>減少</button>
        <button onClick={() => store.dispatch(incrementAsync(1000))}>異步增加</button>
      </div>
    </Provider>
  );
}

export default App;

這樣，你就可以在同一個專案中同時使用Redux、Redux-Thunk和Redux Toolkit，根據需要管理你的應用程式的狀態並處理異步操作。它們能夠共同運作，提供了更好的開發體驗和可維護性。

Zustand：

Zustand是一個簡單而現代的State Management庫，它允許我們使用React hooks來管理狀態。以下是一個示例：

首先，安裝zustand：
```
npm install zustand
```

然後，使用Zustand來管理狀態：

import React from 'react';
import create from 'zustand';

const useCounter = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function App() {
  const { count, increment } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
}

export default App;

Jōtai：

Jōtai是另一個現代的State Management庫，它使用原子操作來管理狀態。以下是一個示例：

首先，安裝jotai：
```
npm install jotai
```

然後，使用Jōtai來管理狀態：

import React from 'react';
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function App() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default App;