react router redux實際操作

2021-10-25 02:47:27 字數 2700 閱讀 4768

react-router學習**：

import react,  from "react";


import stepone from "./stepone";


import steptwo from "./steptwo";


import stepthree from "./stepthree";


import from "antd";


import from "react-redux";


import from "react-router-dom";


import "antd/dist/antd.css";


constructor(props)


this.handleclick = this.handleclick.bind(this);


} handleclick(e) );


} render() 


}const mapstatetoprop = state => ();


const mapdispatchtoprop = dispatch => ();


export default connect(


mapstatetoprop,


mapdispatchtoprop
新建action檔案，檔案下新建js檔案

import * as types from "../types";


export function getstep(value) ;


}export function changestep(steplist) ;


}
新建reducers檔案，檔案下新建兩個js

reducers.js

import stepreducer from "./stepreducer";


import from 'redux';


export default combinereducers();
stepreducer.js

import * as types from "../types";


const initialstate = ;


export default function alllist(state = initialstate, action) ;


default:


return state;


}}
新建types檔案，檔案下新建js檔案

export const step_list = "step_list";
頁面檔案stepone.js，另外兩個頁面省略**

import react,  from "react";


import from "antd";


import from "react-redux";


import from "./action"


// import from "react-router-dom";


// let history = usehistory();


class stepone extends component 


this.addstep = this.addstep.bind(this);


}addstep() = this.props;


getstep("getstep");


// history.pushstate("/steptwo")


}render() 


}const mapstatetoprop = state => ();


const mapdispatchtoprop = dispatch => ();


export default connect(


mapstatetoprop,


mapdispatchtoprop


)(stepone);
初始index檔案的配置

import react from 'react';


import reactdom from 'react-dom';


import './index.css';


import * as serviceworker from './serviceworker';


import from "react-redux";


import from "react-router-dom";


import thunkmiddleware from 'redux-thunk'


import from 'redux-logger'


import reducers from "./reducers/reducers";


const loggermiddleware = createlogger()


const store = createstore(


reducers,


thunkmiddleware, // 允許我們 dispatch() 函式


loggermiddleware // 乙個很便捷的 middleware，用來列印 action 日誌


))reactdom.render(


, document.getelementbyid('root')


);serviceworker.unregister();

react router redux 簡單例子

reducer與按需載入元件的時候，一併載入對應的state，具體流程就不多說了，看 import from redux import from react router redux export const makerootreducer asyncreducers export const in...

tcpdump命令實際操一 抓獲資料報

寫的只是自己使用中具體用到的。具體引數沒有寫，要了解深入的請看man手冊 通常情況下應該是監控的外網的訪問先使用命令看看你對應的網絡卡是哪個 ifconfig nsa8ea6913 cb link encap ethernet hwaddr fa 16 3e d1 e6 61 inet addr b...

ElasticSearchserver操作命令

在win7環境，進入elasticsearch安裝資料夾的bin資料夾 1.elasticsearch.bat就能夠啟動elasticsearch了。執行這個外掛程式的優點是 elasticsearch須要的jvm引數和其他配置都已經配置好了，很方便。停止就ctrl c了。在linux環境，進入el...