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 資源

• 源碼