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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chancein007/article/details/78536510

react和redux中的几种常用的方法

1. createStore(reducer, [initState, enhancer])------redux中的方法 作用:创建一个Redux store来存放应用中所有的state,一个...
  • tangzhl
  • tangzhl
  • 2017-05-01 15:11:12
  • 1977

全栈Redux实战

本文乱译自一篇英文博文( Full-Stack Redux Tutorial ),本人英语能力不足,技术能力有限,如有错误,多多包涵。 http://www.open-open.com/lib/...
  • oMingZi12345678
  • oMingZi12345678
  • 2016-09-23 22:14:27
  • 1268

使用Redux管理你的React应用

React是最好的前端库,因为其发源于世界上最好的后端语言框架。 —信仰 4.0 will likely be the last major release. Use Redux inste...
  • u010662249
  • u010662249
  • 2016-07-17 18:12:57
  • 643

深入浅出React之第三章:使用redux管理应用状态

Redux在前面,我们已经介绍了完全使用react来管理应用数据的麻烦,下面我们将要介绍redux这种管理应用状态的框架。 1. Reduxredux的三大基本原则: 唯一数据源 保持状态只读 数据...
  • qq_26708777
  • qq_26708777
  • 2017-10-09 00:34:53
  • 392

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

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

React-redux使用

1.actionCreator// action creator 就是函数而已... var actionCreator = function() { // ...负责构建一个 action ...
  • strawferry
  • strawferry
  • 2016-07-17 23:48:02
  • 726

redux源码详解

redux是基于flux单向数据流的一种实现,功能很强大,源码很精炼,可以扩展出各种中间件,so 酷。createStore.js这个文件其实很简单,首先我们来看一下它接受的参数。 function ...
  • xsl_bj
  • xsl_bj
  • 2016-03-15 17:57:08
  • 747

redux的所有state都需要放到store里吗?

在项目前期的时候我们的技术经理提出了所有的state都放进去store,这样的好处是可以统一维护,格式化所有代码,但是我个人对此持有保留意见,在一段时间的书写代码后,今天我和技术经理重新讨论了这个问题...
  • a986597353
  • a986597353
  • 2017-11-27 16:57:45
  • 560

React Native之Redux使用详解之Reducers(30)

React Native之Redux使用详解之Reducers一. ReducersActions 描述发生了什么,但不能指定响应中state怎么变化,这是Reducers的工作。1. 设计State...
  • u014484863
  • u014484863
  • 2016-08-28 23:25:29
  • 2781

Redux学习总结

State State (也称为 state tree) 是一个宽泛的概念,但是在 Redux API 中,通常是指一个唯一的 state 值,由 store 管理且由 getState() 方法获...
  • liujie19901217
  • liujie19901217
  • 2017-07-16 22:35:01
  • 513
收藏助手
不良信息举报
您举报文章:在React的Redux中,如何方便的查看next state的状态?
举报原因:
原因补充:

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