目录如下:
代码如下:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router,Route,Redirect,Switch} from "react-router-dom"
import Home from "./redsss/home"
import Login from "./redsss/login"
class App extends Component{
constructor(props){
super(props)
}
render() {
return (
<div>
<Router>
<Switch>
<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Redirect to="/login"/>
</Switch>
</Router>
</div>
);
}
}
export default App;
import React from "react";
import Action from "./Action";
import Store from "./Store";
class Login extends React.Component{
constructor(props){
super(props)
}
tap(){
Store.dispatch(Action(this.refs.ipt.value));
this.props.history.push("/home")
}
render(){
return(
<div>
<h2>TODO_LOGIN</h2>
<div>用户名:<input type="text" ref="ipt"/></div>
<div>密码:<input type="password" ref="ipt1"/></div>
<button onClick={this.tap.bind(this)}>登录</button>
</div>
)
}
}
export default Login;
import React from "react";
import Store from "../redsss/Store";
class Home extends React.Component{
constructor(props){
super(props)
this.state={
str:Store.getState()
}
this.onchange=this.onchange.bind(this)
}
onchange(){
var data =Store.getState();
this.setState({str:data})
}
componentDidMount(){
Store.subscribe(this.onchange)
}
render(){
return(
<div>
<h2>首页----</h2>
<div>欢迎回来----{this.state.str}</div>
</div>
)
}
}
export default Home;
var Action=function(text){
return{
type:"TODO_LOGIN",
text:text
}
}
export default Action;
var Reducer =function(state,action){
if(typeof state =="undefined"){
return ""
}
switch (action.type) {
case "TODO_LOGIN":
return action.text;
break;
default:
return state
break;
}
}
export default Reducer
import {createStore} from "redux";
import Reducer from "./Reducer";
var Store =createStore(Reducer);
export default Store;