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

duan199226 發布于2019-08-20 16:57 / 944人閱讀

摘要：在一個的項目中，目前來說項目過大，數據交互多的情況下選擇使用和是很常見的。

在一個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的使用是互不影響的，一切正常使用就好。

GPU云服務器云服務器 react-router4 react-redux react-router 阿里云服務器怎么和小程序配合使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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