react中react-redux和react-router4.*的配合使用

duan199226 发布于2019-08-20 16:57 / 816人阅读

摘要：在一个的项目中，目前来说项目过大，数据交互多的情况下选择使用和是很常见的。

在一个react的项目中，目前来说项目过大，数据交互多的情况下选择使用redux和router是很常见的。下面我就用代码的展现形式，来举例：

我们知道在react-redux的实践中，最外层就是render函数的使用：

import React from "react";
import {render} from "react-dom";
import App from "./App";
//这里使用render渲染
render(
  ,
  document.getElementById("root")
);

当我们使用redux的时候，就会先创建一个store，然后使用react-redux提供的Provider作为父组件包裹App：

render(
  
    
  ,
  document.getElementById("root")
);

当搭配router后，这里仍然不需要要改变的。我们只需要将router的配置，放入App里面的需要的组件里面：
routerMap.js:

import React,{Component} from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import Home from "../containers/Home";
import User from "../containers/User";
import Search from "../containers/Search";
import Detail from "../containers/Detail";
import City from "../containers/City";
import NotFound from "../containers/404Page";
class App extends Component{
  constructor(props, context){
    super(props, context);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
  }
  render(){
    return (
      
        
          {/**
           * 这里可以公共的样式,比如 头部, 尾部, 等.
           */}
           header
          {/*结合Switch组件可以匹配到都匹配不到的路劲,404等...*/}
          
            
            
            
            
            
            
          
          footer
        
      
    );
  }
}
export default App;

这时候后，在最外层：

import React from "react";
import {render} from "react-dom";
import App from "./routerMap";
//这里使用render渲染
render(
  
    
  ,
  document.getElementById("root")
);

其实最后router和redux的使用是互不影响的，一切正常使用就好。

混合云专线服务 react-router4 react-redux react-router 阿里云服务器怎么和小程序配合使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83278.html

react-redux

摘要：主要用于构建，被认为是中的视图。高效通过对的模拟，最大限度地减少与的交互。也就是说，用户负责视觉层，状态管理则是全部交给它。该回调函数必须返回一个纯对象，这个对象会与组件的合并。 React 定义： React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，React 被认为是 MVC 中的 V（视图）。特点：声明式设计 −React采用声明范式...

sanyang 2019-08-20 16:22 评论0 收藏0
React技术栈实现XXX点评App demo

摘要：项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套，我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。项目地址：https://github.com/Nealyang/R...技术栈：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 评论0 收藏0
react+react-router+react-redux全家桶小项目开发过程分享

摘要：项目地址下载完项目然后即可基于的项目，主要是为了学习实战。数据都是固定的，从饿了么接口临时抓的，模拟了一个的异步数据延迟，感谢饿了么。详细信息可以看上面的官方文档，我这里就简单说一下我这个项目的应用。 react-ele-webapp 项目地址：https://github.com/kliuj/reac... run 下载完项目npm install然后npm run dev 即可 ...

zzir 2019-08-20 15:11 评论0 收藏0
React构建个人博客

摘要：兄弟组件之间无法直接通信，它们需要利用同一层的上级作为中转站。在两个地方会用到，一是通过提交后需要拿到里面的数据，二是利用监听到发生变化后调用它来获取新的数据。前言在学习react的过程中，深深的被react的函数式编程的模式所吸引，一切皆组件，所有的东西都是JavaScript。React框架其实功能很单一，主要负责渲染的功能，但是社区很活跃，衍生出了很多优秀的库和工具。个人觉得...

lyning 2019-08-26 11:37 评论0 收藏0
从无到有-在create-react-app基础上接入react-router、redux-saga

摘要：将所有的需要鉴权的页面放在例如下，只有在有微信相关鉴权的信息存在，才允许访问接下来的界面，否则，容器内甚至可以直接不渲染接下来的界面。而接下来的则是把路由导向至了一个微信端专用的。搭建项目框架新建项目执行如下代码，用create-react-app来建立项目的基础框架，然后安装需要用到的依赖。 $ npx create-react-app my-test-project $ cd...

褰辩话 2019-08-23 14:06 评论0 收藏0