代码之家  ›  专栏  ›  技术社区  ›  xiaolingxiao

通过登录控制台而不使用前端呈现部分来响应redux测试

  •  1
  • xiaolingxiao  · 技术社区  · 8 年前

    我正在学习react redux,我对它的工作流程完全陌生。尽管我有丰富的经验 Haskell , Javascript ,以及一些经验 node.js 键入web dev。我正在跟踪此文档: https://redux.js.org/basics/store ,在“分派操作”一节中,我看到以下代码:

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

    建议我可以登录到控制台没有用户界面。我很困惑,因为如果我不运行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 ,尽管可能有更好的选择,但这是一个安慰的问题。

    3 回复  |  直到 8 年前
        1
  •  2
  •   phtn458    8 年前

    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
    

    你也可以使用 global.console.log() 在typescript上

        2
  •  1
  •   devserkan    8 年前

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

    它会登录到浏览器的web开发人员控制台。文档可能不太清楚,但实际上您正在使用一个javascript文件,并在一些html文件中使用它,然后用浏览器检查它。

    因此,当您console.log时,您有一个gui,并在开发工具控制台中看到结果。显然,您需要在创建存储的地方使用getState(),并且必须以某种方式运行该文件。

    我建议你看《红人》创作者的那两个教程。他们是伟大的,让你了解什么是在雷德乌斯的罩下,以及如何把事情粘在一起。

    Getting Started With Redux

    Building React Applications with Idiomatic Redux

    如果你是如此新的反应,首先去没有红色素,然后消化反应后去红色素。作为一个学习者,我对javascript没有太多的经验,我已经从这个顺序中学到了很多东西。

        3
  •  1
  •   Rohith Murali    8 年前

    有几个地方你可以检查你的日志。

    1. 使用减速机
      您将拥有一个名为reducer的函数,在其中调度命中。因此,你可以记录你的补丁。

    2. 地图状态
      此函数的第一个参数是存储中的状态值。因此,当您将组件与此函数连接时,对存储的任何更改都可用于此函数。

    3. 中间件
      您可以在存储库中添加一个中间件,并在其创建时将其用于存储空间。 你可以退房 redux-logger 使用此层的npm模块。