React Easy State 的开发工具？

Question

我只是从 redux 切换过来，是否有可用的工具来检查甚至操纵 React Easy State 存储以用于开发目的，或者您有什么好的实践 Tipps 可以这样做吗？是否有可能 console.log 每次更改时的当前状态？

Answer 1

确实可以使用 middleware. A simple logging middleware can look like this (it's typed in 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 状态的 CRUD 控制（创建、读取、更新、删除）。

编辑： 因为我误读了你的问题，GitHub 上的这个 comment 可能会让你感兴趣。似乎没有非常活跃的维护者^^ 但是抱歉，我对easy-state一无所知。

Answer 2

我们还没有开发工具，但这是一个经常被要求的功能。它在我们的议程上，我们已经在收集有关人们对开发工具的期望的数据。 Sooo...对您来说，React state devtool 中的必备功能是什么？

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

Is ist maybe possible to console.log the current State on every change?

当然可以：

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 3

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

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

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

window.__EASY_STORES__ = {
 MY_STORE: myStore
}

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

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

React Easy State 的开发工具？

Devtools for React Easy State?

devtools

reactjs

react-state-management

react-easy-state