路由中使用redux

本质就是让所有组件都可以获取路由数据和store数据

dealFn拓展高阶组件，接收store中所有的数据

withRouter(自带)拓展高阶组件，接收路由中所有数据

通过Route组件渲染页面组件，传递路由所有数据

通过父子组件通信，传递所有或部分路由和store中数据

注意：在App组件中，通过Route组件渲染了页面组件，那么

　　App组件与页面组件不是直接的父子关系，不能直接传递属性数据

　　App组件与Route组件是直接的父子关系，可以传递数据，但Route组件内部不会接收

我们在Provider中使用路由策略组件，去渲染应用程序组件，理论上Provider与路由策略没有先后顺序

 

import React, { Component } from "react";
import {render} from 'react-dom';
import {Route, BrowserRouter, HashRouter, Link, Redirect,  Switch, withRouter } from 'react-router-dom';
import {createStore} from 'redux';
import { connect, Provider} from 'react-redux';

const ADD_NUM = 'ADD_NUM';
const DEL_NUM = 'DEL_NUM';

// action 
let addNum5 = {type: ADD_NUM, data: 5};
let delNum2 = {type: DEL_NUM, data: 2};

// reducer
function reducer(state = 0, action ) {
    switch(action.type) {
        case ADD_NUM:
            state += action.data;
            break;
        case DEL_NUM:
            state -= action.data;
            break;
        default:;
    }
    return state;
}

let store = createStore(reducer)
class App extends Component {
    render() {
        console.log('app', this.props);
        let { match, state, dispatch} = this.props
        return(      
            <div>
                <button onClick={e => dispatch(addNum5)}>增加5</button>
                {/* 1父子组件通信的方式传递数据可以传递部分数据 */}
                {/* App和Header父子 */}
                <Header match={match} state={state}></Header>
                <hr/>
                <Switch>
                    {/* exact表示精确匹配 */}
                    <Route path='/' component={Home} exact></Route>
                    <Route path='/list/:page' component={List} ></Route>
                    {/* Detail组件与App不是父子关系 不能传输数据 */}
                    {/* <Route path="/detail/:id" component={Detail} state={state}></Route> */}
                    <Route path='/detail/:id' component={DealDetail} ></Route>  
                    {/* 重定向 */}
                    <Redirect from="/zihui" to="/detail/zihui"></Redirect>
                    {/* 默认路由 */}
                    <Route path="*" component={Home}></Route>
                </Switch>
                
            </div>
        )
    }
}
class Header extends Component {
    render() {
        console.log('header', this.props);
        return (
            <div>
                <h1>header part - {this.props.state}</h1>
                {/* 路由导航 */}
                <Link to="/">Home</Link>
                <Link to="/list/1">List</Link>
                <Link to="/detail/1">detail</Link>
                {/* <a href=""></a>定义hash策略不能使用 */}

            </div>
        )
    }
}
class Home extends Component {
    render() {
        console.log('home', this.props);
        return (
            <div>
                <h2>home part</h2>
            </div>
        )
    }
}
class List extends Component {
    render() {
        console.log('list', this.props);
        return (
            <div>
                <h2>list part</h2>
            </div>
        )
    }
}
class Detail extends Component {
    render() {
        console.log('detail', this.props);
        let {history, dispatch} =  this.props
        return (
            <div>
                <h2 onClick={e => dispatch(delNum2)}>detail part</h2>
                <hr/>
                <Demo history={history} dispach={dispatch}></Demo>
            </div>
        )
    }
}
class Demo extends Component {
    render() {
        console.log('demo', this.props);
        return (
            <div>
                <h2>demo part</h2>
            </div>
        )
    }
}
// 拓展高阶函数
let deal = connect(
    state =>({state}),
    dispatch =>({dispatch})
)

let DealApp = deal(App)

// 3.使用withRouter方法拓展高阶组件
let RouterApp = withRouter(App);
// 高阶组件可以一直拓展
let RouteDealApp = withRouter(DealApp);
// 拓展store
let DealDetail = deal(Detail);
// hash策略
render(
    <HashRouter>
        {/* provider在HashRouter里面外面都可 */}
        <Provider store={store}>
            {/* <App></App> */}
            {/* 拓展store */}
            {/* <DealApp></DealApp> */}
            {/* 拓展路由数据 */}
            {/* 1 */}
            {/* <Route path="/" component={DealApp}></Route> */}
            {/* 2 */}
            <RouteDealApp></RouteDealApp>
        </Provider>
        
    </HashRouter>
    , app)