以前 createStore 集成 redux-devtool 的时候提供 3 个参数, 现在需要将后面的 middleware 全部包裹起来:
而且Redux还有一个调试神器,Redux-DevTools,通过它我们可以很方便的查看应用的整个状态树,以及状态的变化过程。 3. 附录 Redux 中文文档:http://cn.redux.js.org/ Redux-DevTools: https://github.com/gaearon/redux-devtools 关于作者
redux(必选) react-redux(必选):redux作者为方便在react上使用redux开发的一个用户react上的redux库; redux-devtools(可选):Redux开发者工具支持热加载 redux-observable(可选):实现可取消的action; npm install --save redux npm install --save react-redux npm install --save-dev redux-devtools
需要 redux-devtools 规范化数据?需要考虑 selector 的性能优化 处理大型 action payload? │ ├─ redux-middleware(thunk/saga) │ ├─ redux-devtools 的时间旅行功能 │ ├─ 复杂的规范化数据结构(normalizr) │ │ │ ├
redux-devtools install 可以直接从 Chrome Web Store来安装,这样方便许多。
redux-devtools-dock-monitor redux-devtools-filterable-log-monitor redux-devtools-log-monitor remote-redux-devtools redux-devtools
You don't need to npm install redux-devtools when using the extension (that's a different lib). 1.2
__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二个参数添加这个redux-devtools的配置可以开启调试功能 ? (需要浏览器安装redux-devtools插件) ? (需要按照文档,对创建的store仓库配置一下) ? 浏览器里添加redux-devtools,在创建store的createStore()的第二个参数中添加redux-devtools插件的配置,使浏览器支持Redux查看store的各种状态 const
Redux DevTools 是一款 Redux 官方提供的浏览器调试工具可以让我们很方便的对 Redux 保存的状态进行追踪调试GitHub 地址:https://github.com/reduxjs/redux-devtools
基本使用 安装 npm install --save react-redux npm install --save-dev redux-devtools 实例 主要是理解观察者模式,以及结合原理图先理解
components文件下 容器组件 负责管理数据和业务逻辑,不负责UI的呈现 使用Redux的APi 一般保存在containers文件夹下 Redux调式工具 步骤: 1、Chrome插件 redux-devtools
/reducer'; const store = createStore( reducer, // redux-devtools工具调试 window.
__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二个参数添加这个redux-devtools的配置可以开启调试功能 方法二:终端下安装redux-devtools-extension 浏览器里添加redux-devtools,在创建store的createStore()的第二个参数中添加redux-devtools插件的配置,使浏览器支持Redux查看store的各种状态 const
webpack的hotload以及redux-devtools,使得调试方便,开发效率大大提高。 服务端渲染。
redux拥有独立的redux-devtools工具来进行状态的调试,拥有可视化的状态跟踪、时间回溯等功能。
为什么要创建副本state 在redux-devtools中,我们可以查看到redux下所有通过reducer更新state的记录,每一条记录都对应着内存中某一个具体的state,使得用户可以追溯到每一次历史操作产生与执行的状态
i redux react-redux -S 在react下,还需要创建reac相关依赖 npm install --save react-redux npm install --save-dev redux-devtools
庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。
npm install --save react-redux npm install --save-dev redux-devtools 三大原则 单一数据源 整个应用的state被存储在一棵object reducer确定的,就像helloAPP的例子中, const reducer = combineReducers({ hello: hello, city: cityReducer }) 而由redux-devtools
在PC端使用Redux的时候,我们都很喜欢使用Redux-Devtools来查看Redux触发的action,以及对应的数据变化。PC端使用的时候,我们习惯摆在右边。 因此我们只好自己封装了一个tap component Debug相关 移动端请慎用redux-devtools,易造成卡顿 Webpack慎用devtools的inline-source-map模式