关于javascript:React-Redux-Reactrouter-全家桶

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>