筆記--react+redux+router.md

react+redux+router搭建的項目

目錄

• Redux應用
• Redux-thunk中間件
• react-redux
• React-router

2019.10.11

Redux應用

詳見/components/TestDemo/TodoList

Redux三要素：（我的理解）

• Action: 存儲函數方法
• Store: 存儲數據的倉庫
• Reducer: 數據處理倉庫,必須是純函數

技巧：

1. 把Action Types 單度寫入一個文件 /actions/actionTypes.js

actions.js 引入 import * as types from './actionTypes.js'

reducer.js  引入import {TODO_INIT, TODO_ADD} from '../actions/actionTypes.js'
複製代碼

2. 編寫actionCreators.js文件 /actions/indexUI.js

經過store.getState()獲取存儲store數據

經過dispatch添加store數據

store.dispatch({
    type:'USERINFO_INIT',
    data:UserInfoData.resultContent
})

複製代碼

但深層的組件中通常不直接使用這兩個方法。

只有store能改變本身的內容，Reducer不能改變

Reudcer只是返回了更改的數據，可是並無更改store中的數據，store拿到了Reducer的數據，本身對本身進行了更新。

Reducer必須是純函數

它的返回結果，是徹底由傳入的參數state和action決定的，這就是一個純函數

拆分UI組件

分工合做，一人寫樣式，一人寫邏輯。

無狀態組件

直接收傳入的props值，不作邏輯處理

利用easy-mock建立模擬數據

地址：www.easy-mock.com/mock/5cfcce…

Redux-thunk中間件

在實際工做中你可使用中間件來進行日誌記錄、建立崩潰報告，調用異步接口或者路由。

Redux-thunk是對Redux中dispatch的增強。

配置Redux-thunk組件

1. 引入applyMiddleware,若是你要使用中間件，就必須在redux中引入applyMiddleware.
2. 引入redux-thunk庫
3. 直接把thunk放到createStore裏的第二個參數就能夠了
4. 詳見/store/index

2019.10.12

redux-saga中間件

1. npm install --save redux-saga
2. 建立sagas.js文件並引入，sagaMiddleware.run(mySagas)

function* mySaga() {} export default mySaga;

3. 比Redux-thunk複雜一點,更適合於大的項目
4. sage中須要用到generator函數

ES6的新特性：

function* mySaga() { //Generator Function(生成器函數)。
    //等待捕獲action
    yield takeEvery(GET_MY_LIST, getList) //關鍵字yield——迭代器生成器
}
複製代碼

報錯：Invariant failed: You should not use outside a

排查以後的react-scripts版本有關 "react-scripts": "^3.0.1",升不了級 最新："react-scripts": "3.2.0", 從新構建一個就行了 （死辦法）

"antd": "^3.23.6",
"axios": "^0.19.0",
"connected-react-router": "^6.5.2",
"history": "^4.10.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.8.6",
"react-redux": "^7.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
複製代碼

npm install history react-router-dom react-router react-redux react-dom redux react connected-react-router prop-types -S

2019.10.12

報錯：不能根目錄引入scss

./src/Layout/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/Layout/index.scss)
@import "style/public.scss";
^
      File to import not found or unreadable: style/public.scss.
      in /Users/mavis/gitHub/react_2019/redux-link/src/Layout/index.scss (line 2, column 1)

複製代碼

解決

1. 添加jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }
複製代碼

2. 在安裝插件時，最好將服務器關閉

react-redux

react-redux中用到兩個只是：provider和connect

1. Provider提供器

Provider是一個提供器，只要使用這個組件，組件裏的其餘全部組件均可以使用store了，這也是React-redux的核心組件了。

import {Provider} from "react-redux";
ReactDOM.render(
    <Provider store={store}>
      <TodoList/>
    </Provider>, document.getElementById('root'));

複製代碼

2. connect鏈接器

connects是一個鏈接器，連接state和dispatch,這個能夠簡單的獲取到store中的數據了。 connect的做用是把UI組件（無狀態組件）和業務邏輯代碼的分開，而後經過connect再連接到一塊兒，讓代碼更加清晰和易於維護。這也是React-Redux最大的有點。

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux';//引入鏈接器
import * as TodoActions from '../actions'

const mapStateToProps = state => ({
    userInfo: state.userInfo,
    todosReducer: state.todosReducer
})

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(TodoActions, dispatch)
})
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(TestScope)
複製代碼

• react-redux中的provider和connect

React-router

1. exact 精確匹配
2. 動態傳值

這個設置是以:開始的，而後緊跟着你傳遞的key（鍵名稱）名稱 <Route exact path='/v2/tdscope/build/id:?/type:?' render={props=><TodoList {...props} actions={actions}/>}/>

3. Link上傳遞值 <Link to="/list/123">列表</Link>

4. 在組件上接收並顯示傳遞值 this.props.match 包括三個部分:

• patch:本身定義的路由規則，能夠清楚的看到是能夠產地id參數的。
• url: 真實的訪問路徑，這上面能夠清楚的看到傳遞過來的參數是什麼。
• params：傳遞過來的參數，key和value值。

5. ReactRouter重定向Redirect使用 大體兩種知識點：重定向，即跳轉頁面,直接跳轉。

• 標籤式重定向:就是利用標籤來進行重定向，業務邏輯不復雜時建議使用這種。<Redirect to={'/app'}/>
• 編程式重定向:這種是利用編程的方式，通常用於業務邏輯當中，好比登陸成功挑戰到會員中心頁面。直接在構造函數constructor中加入下面的重定向代碼。this.props.history.push("/home/")

⚠️：重定向和跳轉有一個重要的區別，就是跳轉式能夠用瀏覽器的回退按鈕返回上一級的，而重定向是不能夠的。

6. 嵌套路由

2019.10.14

實參和形參區別- 簡書

• 形式參數：定義函數時函數名後括號中的變量名！
• 實際參數：調用函數時函數名後括號中的表達式！

平時用的變量名傳遞都是形參

實參

try {
    getRobot(callback)
} catch (error) {
    console.log(err)
}
function getRobot(callback){
    var url = `${API_PATH}/lizcloud/api/liz-activitymain-api/noauth/activitymain/activity/assist/detail?tenantId=${params.tenantId}&userId=${params.userId}&activityId=${params.activityId}`
    PromiseXHR(url,null,null,'get').then(res=>{
        callback(res)
    })
}

function callback(res) {
    var resData = JSON.parse(res)
    console.log('----) } 複製代碼

Skeleton骨架屏(antd)

skeleton骨架屏

ReactDOM.createPortal

Portals 提供了一種很好的方法，將子節點渲染到父組件 DOM 層次結構以外的 DOM 節點。 第一個參數（child）是任何可渲染的 React 子元素，例如一個元素，字符串或 片斷(fragment)。第二個參數（container）則是一個 DOM 元素。

ReactDOM.createPortal(child, container)
複製代碼

Portals

自定義事件的觸發dispatchEvent

//建立一個全局監聽事件
export const sendEvent = (key, vals) => {
    var event = new Event(key);
    event.vals = vals;
    window.dispatchEvent(event);
}
複製代碼

• 自定義事件的觸發dispatchEvent