簡單易用的React狀態管理庫
每個應用程式都需要管理狀態。在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：...