Question

我正在学习React redux，我对它的工作流程完全陌生。虽然我在Haskell，Javascript方面拥有丰富的经验，并且在node.js类型的网络开发方面有一些经验。我正在关注这个文档：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开发工作流程与js的等效性。例如，我使用vanilla node和(defn add1 [n] (+ n 1)) (defn mult10 [n] (* n 10)) (defn threadline [arg] (-> arg add1 mult10))登录到控制台，即使可能有更好的选择，这也是一个舒适的问题。

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()

Answer 2

我打算写一个评论，但它变得更大，所以这里作为答案。

它会记录到浏览器的Web开发人员控制台。文档不是那么清楚，但实际上你在那里使用javascript文件并在一些html文件中使用它并用你的浏览器进行检查。

因此，当您使用console.log时，您将拥有一个GUI并在开发工具控制台中查看结果。显然你需要使用你的商店创建的getState（），并且必须以某种方式运行该文件。

我建议您观看Redux创建者的这两个教程。它们很棒，让你了解Redux的内幕以及如何粘合在一起。

Getting Started With Redux

Building React Applications with Idiomatic Redux

如果你对React这么新，首先不使用Redux，然后在消化React后再去Redux。作为一名学习者，并没有那么多Javascript经验，我已经从这个订单中学到了很多东西。

Answer 3

您可以在多个地方查看您的redux日志。

使用减速机
您将有一个称为reducer的函数，其中调度命中。因此，您可以记录您的产品。
mapStateToProps
此函数的第一个参数是商店中的state值。因此，当您使用此功能连接组件时，对该功能的任何更改都将可用。
中间件
您可以在创建时使用applymiddleware函数向商店添加中间件。您可以查看使用此图层的redux-logger npm模块。

通过在没有前端渲染部件

3 个答案: