javascript - 通过在没有前端渲染部分的情况下登录控制台来 react redux 测试

Question

我正在学习 React redux，我对它的工作流程完全陌生。尽管我在 Haskell、Javascript 方面有丰富的经验，并且在 node.js 类型的 Web 开发方面也有一些经验。我正在关注此文档:https://redux.js.org/basics/store ，在 Dispatching Actions 部分，我看到了这段代码:

import {
  addTodo,
  toggleTodo,
  setVisibilityFilter,
  VisibilityFilters
} from './actions'
​
// Log the initial state
console.log(store.getState())

建议我可以在没有 UI 的情况下登录到控制台。我很困惑，因为如果我不运行 GUI，我会在哪里登录到控制台？据我了解，所有 react 都在客户端运行，那么我应该在哪里调用 index.js 来运行它？我的目录目前是这样的:

src
    App.tsx
    todo
        actions.tsx
        reducer.tsx
        index.tsx      <--- this is where the console.log would be

更广泛地说，我问的是 repl 开发工作流与 react redux 的等价物。例如，我确实使用 vanilla js 和 node 登录到控制台，尽管可能有更好的选择，但这是一个舒适的问题。

Answer 1

import index.tsx 到正在渲染的组件，在你的例子中，导入到 App.tsx

例如:

//index.tsx

const testLog = (message) => {
  window.console.log(message)
}
export default testLog

然后在 App.tsx 上假设它是一个有状态的组件:

// App.tsx

import * as React from 'react'
import TestLog from './todo/index'

class App extends React.PureComponent {
  public componentDidMount(){
    TestLog('hello')
  }
  public render(){
    return(
     <div>test</div>
    )
  }
}
export default App

您还可以在 TypeScript 上使用 global.console.log()