在React的Redux中,如何方便的查看next state的状态?

原创 2017年11月14日 23:46:34

我们在React 的开发过程中,通常会引用Redux,作为一个事件,数据和视图的一个解耦框架,从而更加有利于代码的工程实践和维护。使用Reducer的时候,我们通过mapStateToProps方法或者mapDispatchToProps方法,把reducer中维护的state映射到React组件的props上去。但是有的时候,有用reducer里面定义的结构比较复杂,里面有好几层嵌套,我在使用被映射过的props的时候,往往不知道,其到底把state中的那些对象和属性映射过来了,那么有没有什么解决的方法呢?

笔者经过实践,发现,其实又一个很好的方法,可以帮助我们快速的判断和定位,那就是在主的redux的store里面把state里面的对象写入到log里面去,代码如下:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers/index-reducers.js';



const logger = (store) => (next) => (action) => {
  console.group(action.type);
  console.info('dispatching', action);
  if(typeof action !== "function"){
    console.log('dispatching:', action);
  }
  let result = next(action);
  console.log('next state', store.getState());
  console.groupEnd(action.type);
  return result;
}

const IndexStore = createStore(
  reducers,
  applyMiddleware(logger, thunk)
);

export default IndexStore;

就是其中的下面的这行代码大大的帮助了我。

console.log('next state', store.getState());

特意个大家分享一下,希望能够帮助到大家。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

react-redux 中state改变,页面未重新渲染

reducer中改变了state的值,但是页面没有重新渲染
  • za_az
  • za_az
  • 2017年02月22日 12:32
  • 251

react+redux项目如何对state进行初始化

最近在学习redux,对照着官网的示例学习,总有些不明白的地方,所以研究了一下redux源码,主要针对combineReducers、createStore进行分析具体执行函数请参照test.js,可...

React-Redux 恢复列表页跳转明细页之后返回列表状态

场景:     一、 单页面web程序中列表页有1000条数据,点击一条数据跳转到详细页,然后详细页放回列表页保存列表页有1000条数据不变。 解决方案     一、用新窗口打开详细页面不让用户...

react 中随state状态改变,数据在dom中渲染问题

初遇react,问题不断,react生命周期变化,会随着setState状态改变,昨天遇到个问题,处理到晚上10点,虽然自己琢磨未果,但是对生命周期有了很大的了解; 后续再补充相关知识,先说...

深入理解React 组件状态(State)

React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。如何定义State定义一个合适的Stat...

3、React中的状态(this.state)

一、什么是state state表示react组件内部的一种状态,通过组件内的getInitialState函数,可以为组件的初始状态赋值,当组件的状态发生改变时,组件会重新渲染。官方对state的...

React - Lifting state up 提升状态

通常,我们需要几个不同的组件来显示相同的数据变化。我们建议提升state到离它们最近的父级组件中。让我们来看看它是怎么执行的。 在这一小节中,我们会创建一个根据给定温度判断水是否能被烧开的温度计算器。...

react demo13 (根据组件属性状态this.state实现表单实时监控)

表单监控,this.state实战练习 需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:组件与用户交换时,存在状态的变化,即输入框的值 react dome ...

React Native从零开始(三)Props(属性)和State(状态)

React Native从零开始(三)Props(属性)和State(状态) 一、Props(属性) 首先官网上的介绍:...

React Native探索(三)组件的Props(属性)和State(状态)

在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在React的Redux中,如何方便的查看next state的状态?
举报原因:
原因补充:

(最多只允许输入30个字)