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>
點擊左下角閱讀原文，到 SegmentFault 思否社區 和文章作者展開更多互動和交流。