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

前端之家收集整理的这篇文章主要介绍了在React的Redux中,如何方便的查看next state的状态?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们在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相关文章