React + Redux + React-router 全家桶

React

React是 DOM 渲染的一個抽象層（view層），React 不只能經過 ReactDOM 和Web頁面打交道，還能用在服務器端SSR，移動端ReactNative和桌面端Electron。

web端開發須要搭配React-dom使用

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
      <h1>Hello React</h1>
  </div>
 )

ReactDom.render(<App/>, document.getElementById('root'));

移動端的ReactNative開發須要搭配react-native使用

import React from 'react';
import {Text, View} from 'react-native';

const WelcomeScreen = () => (
  <View>
      <Text>Hello ReactNative</Text>
  </View>
 );

Redux

主要用來解決組件之間的通訊和邏輯處理。是 Web 應用是一個狀態機，用來確保視圖與狀態是一一對應的（即一個 State 對應一個 View），用戶發出 Action，Reducer 函數算出新的 State，View 從新渲染。

Store

Store是由redux的createStore函數生成。全部的狀態，保存在對象Store裏面，整個應用只有惟一一個Store。

import { createStore} from 'redux'
const store = createStore()

State

State是Redux對 Store 生成快照。

const state = store.getState()

Action

用戶經過View層的交互操做發出Action從而致使State變化。

建立Action

const ADD_TODO = 'ADD_TODO'

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux')

發送Action

import { createStore } from 'redux'
const store = createStore(fn)

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
})

Reducer

用戶發出 Action 後，reducer會對新產生的 State的進行一個計算。store.dispatch方法會觸發 Reducer 的自動執行，所以須要在生成 Store 的時候，將 Reducer 傳入createStore方法。

const store = createStore(reducer)

Redux 提供的combineReducers方法，能夠將各個子 Reducer 函數合成一個大的 Reducer。

import { combineReducers } from 'redux';

const totalReducer = combineReducers({
  fuc1,
  fuc2,
  fuc3
})

export default totalReducer

綜上，redux工做原理以下：

Redux中間件

Action 發出之後，Reducer 當即算出 State，是同步；過一段時間再執行 Reducer，是異步。中間件能使 Reducer 在異步操做結束後自動執行。中間件本質是一個函數，是在action發出和reducer計算以前觸發的功能回調。

中間件的使用

將中間件傳入applyMiddleware函數，將applyMiddleware傳入createStore函數，就完成了store.dispatch()的功能加強。

import thunk from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunk))

react-redux

react-redux是 redux一個封裝庫，react-redux將組件分爲容器組件和UI組件。UI組件負責純粹的視圖渲染，容器組件包含數據處理等邏輯操做。

connect() 函數負責將UI組件映射成容器組件

import { connect } from 'react-redux'

const mapStateToProps = state => ({
   Data1: state.Data1,
   Data2: state.Data2
});

const mapDispatchToProps = dispatch => ({
   dispatch,
   actions: bindActionCreators(
       {
           fetchGetData1,
           fetchGetData2
       },
       dispatch
   )
});

const VisibleTodoList = connect(
 mapStateToProps,
 mapDispatchToProps
)(App)

mapStateToProps負責向UI組件傳入組件邏輯，將UI組件的state映射到props
mapDispatchToProps負責將用戶的交互操做映射爲action

Provider組件負責傳入store對象

connect方法生成容器組件之後，須要讓容器組件拿到state對象，才能生成 UI 組件的參數，Provider組件可讓容器組件拿到state。

<Provider store={store}>
      <Capp />
</Provider>

上邊提供的demo代表Provider在根組件外面包了一層，使App的全部子組件均可以拿到state

react-router-dom

react-router-dom和react-router兩者可選其一，其中react-router-dom比react-router多出 <Link> <BrowserRouter> 這樣的 DOM 類組件。

<Router>
    <Route path='/gep/view/auth/404' component={} />        
</Router>