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

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

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

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

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

使用以下命令進行安裝:

npm install easy-peasy

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

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

store.js

import { createStore, action } from 'easy-peasy'

export default createStore({})

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

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

//...
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操作來改變名字:

import { createStore, action } from 'easy-peasy'

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

現在,您可以在應用程序的任何組件中從easy-peasy導入useStoreStateuseStoreActions

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

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

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

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

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

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

<button
 onClick={() => {
 setName('newname')
 }}
>
 Set name
</button>

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

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