为了账号安全,请及时绑定邮箱和手机立即绑定

请问一下如何调试react-redux?

请问一下如何调试react-redux?

慕村9548890 2019-09-03 10:06:06
如何调试react-redux
查看完整描述

3 回答

?
动漫人物

TA贡献1815条经验 获得超10个赞

  在Redux 应用中使用路由功能,可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源(the source of truth)。 在大多数情况下, 最好将他们分开,除非需要时光旅行和回放 action 来触发 URL 改变。
  1、需要从 React Router 中导入 <Router /> 和 <Route />。代码如下:
  import { Router, Route, browserHistory } from 'react-router';
  在 React 应用中,通常需要会用 <Router /> 包裹 <Route />。 如此,当 URL 变化的时候,<Router /> 将会匹配到指定的路由,然后渲染路由绑定的组件。 <Route /> 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL,用 component 指定路由命中 URL 后需要渲染的那个组件。
  const Root = () => (
  <Router>
  <Route path=逗/地 component={App} />
  </Router>
  );
  另外,在 Redux 应用中,仍将使用 <Provider />。 <Provider /> 是由 React Redux 提供的高阶组件,用来让开发者将 Redux 绑定到 React 。
  然后,开发者从 React Redux 导入 <Provider />:
  import { Provider } from 'react-redux';
  开发者将用 <Provider /> 包裹 <Router />,以便于路由处理器可以访问 store。
  const Root = ({ store }) => (
  <Provider store={store}>
  <Router>
  <Route path=逗/地 component={App} />
  </Router>
  </Provider>
  );
  2、渲染组件
  现在,如果 URL 匹配到 '/‘,将会渲染 <App /> 组件。此外,开发者将在 '/' 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter),需要以下代码:
  <Route path=逗/(:filter)地 component={App} />
  也可以将 '#' 从 URL 中移除(例如:)。 开发者需要从 React Router 导入 browserHistory 来实现:
  import { Router, Route, browserHistory } from 'react-router';
  然后将它传给 <Router /> 来移除 URL 中的 '#’:
  <Router history={browserHistory}>
  <Route path=逗/(:filter)地 component={App} />
  </Router>
  只要开发者不需要兼容古老的浏览器,比如IE9,你都可以使用 browserHistory。
  components/Root.js
  import React, { PropTypes } from 'react';
  import { Provider } from 'react-redux';
  import { Router, Route, browserHistory } from 'react-router';
  import App from './App';
  const Root = ({ store }) => (
  <Provider store={store}>
  <Router history={browserHistory}>
  <Route path=逗/(:filter)地 component={App} />
  </Router>
  </Provider>
  );
  Root.propTypes = {
  store: PropTypes.object.isRequired,
  };
  export default Root;



查看完整回答
反对 回复 2019-09-07
?
临摹微笑

TA贡献1982条经验 获得超2个赞

reducer是根据action来处理state的。redux就像一个全局变量,你把所有需要共享的数据,根据一定的命名规则跟维护规则,放进去维护。
不知道你是怎么整理redux,我觉得redux+saga写出来的代码,简直无可挑剔的完美,代码逻辑一目了然。
在我的项目中,我是把流程完完全全交给saga来处理,在saga里拦截action,然后,saga分发put action去触发reducer,让reducer去处理state。

查看完整回答
反对 回复 2019-09-07
  • 3 回答
  • 0 关注
  • 750 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信