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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

react学习笔记 item4 --- 状态(state)

React 把组件看成是一个状态机(State Machines)。本文介绍了react中组件的state(状态),以及常用的关于 state 的两个组件 API : setState 和replac...
  • u014607184
  • u014607184
  • 2016年11月19日 21:35
  • 1896

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

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

react-redux使用小结

redux使用小结redux使用小结 react-redux store reducer action 整合storereduceraction 补充 使用redux-dev-tools 让改变red...
  • ali1995
  • ali1995
  • 2016年11月21日 22:58
  • 2528

前端学习总结(十九)Redux——管理state数据最优雅的解决方案

一 Redux简介Redux 是 JavaScript 状态容器,提供可预测化的状态管理动机与目的JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 stat...
  • haoshidai
  • haoshidai
  • 2016年08月16日 21:03
  • 7133

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

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

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

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

ReactJs中的状态机State

React将UI简单的看作状态机。看UI看作各种各样的状态,并在各种状态间切换,很容易保持UI的一致性。在React中,你只要改变组件的状态,就会重新渲染UI,React会在最有效的方式下更新DOM。...
  • wustzbq0713
  • wustzbq0713
  • 2016年05月13日 17:43
  • 3601

利用react-redux实现react组件数据之间数据共享

转载https://segmentfault.com/a/1190000009403046 1.安装react-redux $ npm i --save react-redux 2....
  • sinat_17775997
  • sinat_17775997
  • 2017年05月14日 00:11
  • 1684

react-redux的connect()方法 学习笔记

react-redux connect()
  • aa3115386
  • aa3115386
  • 2016年07月27日 16:23
  • 20269

为什么 react 中要使用 redux

背景作为一名后端工程师,我最近在学习前端 react 知识,准备转全栈工程师,学 react 势必要学习 redux ,初学 redux 的时候,觉得 redux 很鸡肋,根据我的经验来看,我认为 r...
  • u010632868
  • u010632868
  • 2017年07月11日 00:15
  • 475
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在React的Redux中,如何方便的查看next state的状态?
举报原因:
原因补充:

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