每個應用程式都需要管理狀態。在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
導入useStoreState
和useStoreActions
:
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
文件中使得應用程序非常容易擴展。