React中redux的用法

目录如上：

代码如下：

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;