/

簡單易用的React狀態管理庫

簡單易用的React狀態管理庫

每個應用程式都需要管理狀態。在React中，我們可以使用hooks，尤其是useState()，並傳遞props來解決許多問題。

當事情變得比較複雜時，我喜歡立即轉向使用狀態管理庫。最近我最喜歡的之一是easy-peasy。

它基於Redux構建，並提供了一種更簡單的方式來與狀態交互。

我喜歡保持我的程式碼盡可能簡單。簡單易懂，簡單美觀。

應該盡量避免複雜性，並將其隱藏在向我們提供簡單接口的庫中。這就是這個庫的情況，也是我喜歡它的原因！

使用以下命令進行安裝：

1
npm install easy-peasy

首先，我們需要創建一個store（存儲庫）。存儲庫是存儲我們的狀態和修改狀態所需的函數的地方。

在專案的根目錄中的store.js文件中創建存儲庫，內容如下：

store.js

1
2
3
import { createStore, action } from 'easy-peasy'

export default createStore({})

我們稍後會在這個文件中添加更多東西。

現在，將React應用程序包裝到easy-peasy提供的StoreProvider組件中。這取決於您使用的工具。例如，在create-react-app中，將以下代碼添加到您的index.js文件中：

1
2
3
4
5
6
7
8
9
10
11
12
//...
import { StoreProvider } from 'easy-peasy'
import store from '../store'

ReactDOM.render(
 <React.StrictMode>
 <StoreProvider store={store}>
 <App />
 </StoreProvider>
 </React.StrictMode>,
 document.getElementById('root')
)

這個操作使我們的存儲庫在應用程序的每個組件中都可用。

現在你可以在store.js文件中添加一些狀態和一些用於改變該狀態的操作。

讓我們進行一個簡單的例子。我們可以創建一個name狀態，並創建一個setName操作來改變名字：

1
2
3
4
5
6
7
8
import { createStore, action } from 'easy-peasy'

export default createStore({
 name: '',
 setName: action((state, payload) => {
 state.name = payload
 })
})

現在，您可以在應用程序的任何組件中從easy-peasy導入useStoreState和useStoreActions：

1
import { useStoreState, useStoreActions } from 'easy-peasy'

我們使用useStoreState來訪問存儲庫狀態屬性：

1
const name = useStoreState((state) => state.name)

使用useStoreActions來訪問我們定義的操作：

1
const setName = useStoreActions((actions) => actions.setName)

現在，我們可以在應用程序中的任何位置調用此操作，例如，如果我們點擊一個按鈕：

1
2
3
4
5
6
7
<button
 onClick={() => {
 setName('newname')
 }}
>
 Set name
</button>

現在，任何通過useStoreState()訪問狀態的其他組件將看到已更新的值。

這只是一個簡單的例子，但這是一切的開始。您可以添加任意多的狀態變量和操作，我發現將它們都集中在store.js文件中使得應用程序非常容易擴展。

tags: [“React”, “state management”, “easy-peasy”]