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

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