简单易行的React状态管理库

每个应用程序都需要管理状态。在React中，我们可以使用钩子，特别是useState() ，并在周围传递道具，可以走很远的路。

当事情变得更加复杂时，我喜欢立即跳到一个状态管理库。我最近最喜欢的一个是 easy-peasy.

它建立在Redux之上，并提供了一种更简单的方式来与状态互动。

我喜欢让我的代码尽可能的简单。简单是可以理解的。简单的是美丽的。

应该不惜一切代价避免复杂，如果可能的话，应该将其隐藏在向我们暴露简单接口的库中。这就是这个库的情况，这也是我喜欢它的原因!

使用安装它。

npm install easy-peasy

首先，我们需要创建一个商店。存储器是我们存储状态的地方，以及修改状态所需的函数。

在你项目根部的文件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) => {
    name = payload
  })
})

现在在你的应用程序的任何组件中，你可以从useStoreState 和useStoreActions 中导入easy-peasy 。

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 文件中，使应用程序非常容易扩展。