前端学习（2318）：react之路由基础之hook之redux

app.js

import React, {useState} from 'react';

import  Home from './components/Home.js'
import World from './components/World.js';
import Phone from "./components/Phone.js";
import{Route,Link,NavLink,Switch,Redirect,withRouter} from 'react-router-dom'
import './App.css';
function App(props) {

  /*  /!*不是路由切换的组件也有属性*!/
 //监控组件路由的变化
    props.history.listen((link)=>{
        console.log(link)
    })
    console.log(props)*/
  /*  let[vala,setVala]=useState(0)
    let[valb,setValb]=useState(0)
    let[valc,setValc]=useState(0)*/
  return (
    <div className="App">
        {/*<div>

            使用数据:{vala}---{valb}---{valc}
            <button onClick={()=>{setVala(vala+1)}}>点我加</button>
        </div>*/}
        <Home></Home>

        {/*<div>
            <NavLink to="/home">点我去home</NavLink>
            <NavLink to="/world">点我去world</NavLink>
            <NavLink to="/phone/我是参数">点我去hone</NavLink>

            <button onClick={()=>{props.history.push("/home")}}>点我去home</button>
            <button onClick={()=>{props.history.push("/world")}}>点我去world</button>
            <button onClick={()=>{props.history.push("/phone")}}>点我去phone</button>
        </div>
        <Switch>
      你好
        <Redirect from="/" to="/home/homea" exact></Redirect>
        <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
        <Route path="/world" component={World}></Route>
        <Route path="/phone/:id" component={Phone}></Route>
        </Switch>*/}
    </div>
  );
}
/*class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            text:"我是状态数据"
        }
    }
    render() {
        return(
            <div>hello--{this.state.text}</div>
        )
    }
}*/

export default withRouter(App);

 redux.js

var obj=[
    {name:'xixi',age:18}
]
export  function data(state=obj[0].age,action){
    switch (action.type){
        default:
            return state
        break;
    }
}

store.js

import {createStore} from "redux";
import {data} from "./redux"
export var store=createStore(data)

Home.js

import React, {Component} from 'react';
import{Route,NavLink} from 'react-router-dom'
import HomeA from './home/homea.js'
import HomeB from './home/homeb.js'
import {store} from "../redux/store";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state={
            num:store.getState()
        }
    }
    render() {
        return (
            <div>
              {/*  <NavLink to="/home/homea">homea</NavLink>
                <NavLink to="/home/homeb">homeb</NavLink>
                <Route path="./home/homea" component={HomeA}/>
                <Route path="./home/homeb" component={HomeB}/>*/}
                home----{this.state.num}
            </div>
        );
    }
}

export default Home;

action.js

export const add=(num)=>{
    return {type:"ADD",data:num}
}

export const del=(num)=>{
    return {type:"DEL",data:num}
}

 

运行结果