用于 React Easy State 的开发工具？

Question

我只是从 redux 切换，是否有可用的工具来检查甚至操作 react Easy State 存储以用于开发目的，或者您有任何好的做法 Tipps 这样做吗？ 是否有可能在每次更改时 console.log 记录当前状态？

Answer 1

我们还没有开发工具，但它是一个经常被请求的功能。它在我们的议程上，我们已经在收集有关人们对开发工具的期望的数据。太好了……对您来说，React 状态开发工具中的必备功能是什么？

关于时间线：我们将在开发工具之前发布更好的文档、linter 和严格模式。我们已经有一个非常基本的 devtool 原语（它只记录大量数据），可以同时使用。不过，它永远不会是官方 API，我们只会在以后的版本中删除它。你感兴趣吗？我们应该将它作为临时解决方案发布吗？

是否有可能在每次更改时控制台记录当前状态？

当然：

import { store, autoEffect } from '@risingstack/react-easy-state'

const myStore = store({
  name: 'Bob'
})

autoEffect(() => console.log(JSON.stringify(myStore, null, 2)))

// logs `{ name: 'Ann' }`
myStore.name = 'Ann'

（我是 React Easy State 的作者）

Answer 2

如果您使用的是全球商店，例如：

const myStore = store({
 a: 1
});

您可以将它们分配给窗口对象，以便在您的 chrome/firefox 开发工具中执行以下操作：

window.__EASY_STORES__ = {
 MY_STORE: myStore
}

然后，您可以在控制台中更改该对象，如果您的组件包含在 view 中，它应该会反映在渲染中。

除此之外，目前社区中正在讨论构建一整套开发工具，但目前我们不提供任何开箱即用的检查器或库周围的开发工具。

Answer 3

确实可以使用middleware 记录状态更改。一个简单的日志中间件可以是这样的（输入Flow）：

export default (store: Store<ReduxState>) => (
  next: (action: Action) => ReduxState
) => (action: Action) => {
  console.log(`dispatching: ${action.type}`)
  const result = next(action)
  console.log(`next state: ${JSON.stringify(store.getState())}`)
  return result
}

操纵是另一回事。你可以创建一个“cli”——我最近做了这个in a project。它基本上只是一个暴露给浏览器控制台的 JS 函数。

或者，我建议使用浏览器插件。最常见的可能是“Redux DevTools”，它至少可用于 Firefox 和 Chrome。它为您提供对 redux-state 的 CRUD 控制（创建、读取、更新、删除）。

编辑：由于我误读了您的问题，因此您可能会对 GitHub 上的 comment 感兴趣。似乎没有非常活跃的维护者^^ 但是对不起，我对easy-state一无所知。