react用redux、react-redux(连接)进行多个状态管理；用react-router-dom进行路由跳转

git源码地址https://github.com/kting007/my-react-project.git

1.npm install redux react-redux redux-thunk,然后 创建index.redux.js文件：创建reducer和一些状态管理的action代码如下

const add_gun='+';
const remove_gun='-';

export function createShaDaPao(state= 10,action) {
    switch (action.type) {
        case add_gun:
            return state+1;
        case remove_gun:
            return state-1
        default:
            return 10
    }
}
export function addDaPao(){
    return {type: add_gun}
}
export function removeDaPao() {
    return {type: remove_gun}
}
export function addDaPaoAsync() {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(addDaPao())
        },3000)
    }
}

2.创建index.js文件，创建store，并把状态传给子组件APP代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import { createShaDaPao, } from "./index.redux";
import { createStore, applyMiddleware, compose} from "redux";
import { Provider } from 'react-redux'
import  thunk  from 'redux-thunk'
const reduxDevtools = Window.devToolsExtension?Window.devToolsExtension():f=>f
const store = createStore(createShaDaPao,compose(
    applyMiddleware(thunk),
    reduxDevtools
))

ReactDOM.render(
    (<Provider  store={store}>
        <App/>
    </Provider>),
    document.getElementById('root'))

3.App.js代码如下：

import react from 'react'
import { connect } from 'react-redux'
import { addDaPao, removeDaPao, addDaPaoAsync } from './index.redux'
import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
class App extends react.Component{
  constructor(props) {
    super(props);
  }
  add=()=>{
      this.props.addDaPao()
  }
  remove=()=>{
      this.props.removeDaPao()
  }
    addGunAsync=()=>{
        this.props.addDaPaoAsync()
    }
  render() {
      const num = this.props.num;
    return(
        <div>
            <Button type='primary' Cla onClick={this.add}>增加傻大炮</Button>
            <Button type='primary' onClick={this.remove}>回收傻大炮</Button>
            <Button type='primary' onClick={this.addGunAsync}>等3秒再增加傻大炮</Button>
            <h1>这有{num}门傻大炮</h1>
        </div>
    );
  }
}
const mapSateProps=(state)=>{
    return{num : state}
}
const actionCreators = {
    addDaPao, removeDaPao, addDaPaoAsync
}
App= connect(
    state=>({num : state}),
    {addDaPao, removeDaPao, addDaPaoAsync}
)(App)
export default App

4.效果如如下：

5.安装react-router-dom,然后修改index.js,增加路由代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import  Reducer from './reducer'
import { createStore, applyMiddleware, compose} from "redux";
import { Provider } from 'react-redux'
import  thunk  from 'redux-thunk'
import {BrowserRouter,Link,Route, Redirect, Switch} from 'react-router-dom'
import Dashboard from './dashboard'
import Login from './login'

const reduxDevtools = Window.devToolsExtension?Window.devToolsExtension():f=>f
const store = createStore(Reducer,compose(
    applyMiddleware(thunk),
    reduxDevtools
))
function Text(){
    return <h1>默认页面</h1>
}

ReactDOM.render(

    (<Provider  store={store}>
        <BrowserRouter>
            <ul>
                <li>
                    <Link to='/'>默认</Link>
                    <Link to='/login'>登录</Link>
                    <Link to='/DashUrl'>Home</Link>
                </li>
            </ul>
            <Switch>
                <Route path='/' exact component={Text}></Route>
                <Route path='/login' component={Login}></Route>
                <Route path='/DashUrl' component={Dashboard}></Route>
            </Switch>

        </BrowserRouter>
    </Provider>),
    document.getElementById('root'))

6.新建登录和dashboard组件

login.js代码:

import React from 'react'
import { connect } from 'react-redux'
import {login} from './auth.redux'
import {Redirect} from 'react-router-dom'

class Login extends React.Component{
    constructor(props) {
        super(props);
        console.log(props)
    }
    render() {
        return(
            <div>
                {this.props.isAuth?<Redirect to='/DashUrl'></Redirect>:null}
                <h2>无权限查看，请登录</h2>
                <button onClick={this.props.login}>登录</button>
            </div>
        )
    }
}
Login=connect(
    state=>state.auth,
    {login}
)(Login)
export default Login

dashboard.js代码：

import React from 'react'
import App from './App.js';
import {Redirect} from 'react-router-dom'
import {logout} from './auth.redux'
import { connect } from 'react-redux'

class Dashboard extends React.Component{
    render() {
        const home =   (
            <div>
                <button onClick={this.props.logout}>注销</button>
                <h2>dashborad</h2>
                <App/>
            </div>
        )
        const logins = <Redirect to='/login'></Redirect>
        return this.props.isAuth?home:logins

    }
}
Dashboard=connect(
    state=>state.auth,
    {logout}
)(Dashboard)
export default Dashboard

7.增加权限管理的状态和方法auth.redux.js文件代码如下

const loginIn = true
const logOut = false
export function auth(state={isAuth:false,user:'dapao'},action) {
    switch (action.type) {
        case loginIn:
            return {...state,isAuth: true}
        case logOut:
            return {...state,isAuth: false}
        default:
            return state
    }
}
export function login() {
    return {type:loginIn}
}
export function logout() {
    return {type:logOut}
}

8.页面效果如下