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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!