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

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

@H_403_4@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;

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

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

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