Router入门0x205: react-route + redux + react 集成

0x000 概述

这一章终于大集成了

0x001 集成react

• 源码

  import React from 'react'
  import ReactDom from 'react-dom'
  
  class App extends React.Component {
      render() {
          return (<div>react</div>)
      }
  }
  
  ReactDom.render(
      <App/>,
      document.getElementById('app')
  )

• 效果

  

• 说明：

  • 集成react主要是用到react、react-router库

0X002 集成react-router

• 源码

  import React from 'react'
  import ReactDom from 'react-dom'
  import {BrowserRouter, Route, withRouter} from 'react-router-dom'
  
  class Article extends React.Component {
      render() {
          return (
              <p>article</p>
          )
      }
  }
  
  let MyArticle = withRouter(Article)
  
  class App extends React.Component {
      render() {
          return (<div>
              <Route component={MyArticle}></Route>
          </div>)
      }
  }
  
  let MyApp = withRouter(App)
  
  ReactDom.render(
      <BrowserRouter>
          <MyApp/>
      </BrowserRouter>,
      document.getElementById('app')
  )

• 效果
  

• 说明

  • 主要用到react-router-dom库，是针对react-router库在dom环境下的封装
  • withRouter组件，注入match、location、history等属性
  • BrowserRouter接管跟组件
  • Route指定路由和组件的对应关系

0x003 集成redux

• 源码

  • 引入redux相关的包

    import {Provider, connect} from 'react-redux'
    import {createStore} from 'redux'

  • reducer

    const counter = (state = {counter: 0, num: 0}, action) => {
        switch (action.type) {
            case ACTION_INCREMENT:
                return {...state, ...{counter: ++state.counter}}
            case ACTION_DECREMENT:
                return {...state, ...{counter: --state.counter}}
            default:
                return state
        }
    }

  • action和actionCreators

    // action
    const ACTION_INCREMENT = 'INCREMENT'
    const ACTION_DECREMENT = 'DECREMENT'
    // action creator
    const increment = () => ({
        type: ACTION_INCREMENT
    })
    const decrement = () => ({
        type: ACTION_DECREMENT
    })

  • 链接组件

    
    // store
    const store = createStore(counter)
    
    class Article extends React.Component {
        render() {
            return (
                <p>{this.props.counter}</p>
            )
        }
    }
    
    let MyArticle = withRouter(connect((state) => {
        return {
            counter: state.counter
        }
    })(Article))
    
    class App extends React.Component {
        render() {
            return (
                <div>
                    <Route component={MyArticle}></Route>
                    <button onClick={() => this.props.increment()}>+</button>
                    <button onClick={() => this.props.decrement()}>-</button>
                </div>
            )
        }
    }
    
    let MyApp = withRouter(connect(() => ({}), (dispatch) => {
        return {
            increment: () => dispatch(increment()),
            decrement: () => dispatch(decrement())
        }
    })(App))
    
    ReactDom.render(
        <Provider store={store}>
            <BrowserRouter>
                <MyApp/>
            </BrowserRouter>
        </Provider>,
    
        document.getElementById('app')
    )

• 效果

• 说明

  • 主要用到redux、react-redux库
  • reducer、action、actionCreators都是redux用的
  • Provider接管BrowserRouter，并注入store
  • connect连接组件和store，为组件注入reducer

0x005 总结

每一步都搞懂，下一步才能更明确。

0x006 资源

• 源码