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')
    )
  • 效果

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

  • 说明:

    • 集成react主要是用到reactreact-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')
    )
  • 效果
    Router入门0x205: react-route + redux + react 集成
  • 说明

    • 主要用到react-router-dom库,是针对react-router库在dom环境下的封装
    • withRouter组件,注入matchlocationhistory等属性
    • 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
          }
      }
    • actionactionCreators

      // 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')
      )
  • 效果

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

  • 说明

    • 主要用到reduxreact-redux
    • reduceractionactionCreators都是redux用的
    • Provider接管BrowserRouter,并注入store
    • connect连接组件和store,为组件注入reducer

0x005 总结

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

0x006 资源

相关推荐