React Easy State的开发工具

Question

我只是从redux切换，是否有任何可用的工具来检查甚至操作react Easy State存储以用于开发目的，或者您有任何好的实践提示吗？是否可以在每次更改时对当前状态进行console.log？

Answer 1

我们还没有开发工具，但这是一个经常需要的功能。这是我们的议程，我们已经在收集人们对开发工具的期望数据。Sooo。。。React状态开发工具的必备功能是什么？

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

是否可以在每次更改时对当前状态进行console.log？

当然：

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/ffirefox开发工具中，您可以执行以下操作：

window.__EASY_STORES__ = {
MY_STORE: myStore
}

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

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

Answer 3

确实可以使用中间件记录状态更改。一个简单的日志中间件可以是这样的(在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"——我最近在一个项目中做过这个。它基本上只是一个暴露在浏览器控制台中的JS函数。

或者，我建议使用浏览器插件。最常见的可能是"Redux DevTools"，它至少适用于Firefox和Chrome。它为您提供了对redux状态的CRUD控制(创建、读取、更新、删除(。

编辑：由于我误解了你的问题，GitHub上的这条评论可能会引起你的兴趣。似乎没有非常活跃的维护者^^但对不起，我对易状态一无所知。