react-redux是react插件
將所有組件分成兩大類：UI組件和容器組件
安裝npm install react-redux -S
UI組件：

只負(fù)責(zé)UI的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯

不使用this.state

所有數(shù)據(jù)都由this.props提供

不使用任何Redux的API，不需要使用store

容器組件：

負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI的呈現(xiàn)

帶有內(nèi)部狀態(tài)

使用Redux的API

組件結(jié)構(gòu)

• 用容器組件包裹UI組件
• 容器組件負(fù)責(zé)與外部的通信，將數(shù)據(jù)傳給UI組件
• UI組件渲染出視圖
• connect函數(shù)(來(lái)自react-redux插件)：連接React組件與React store

關(guān)鍵字

• connect
• Provider

App修改為UI組件

• index.js

import ReactDOM from 'react-dom' import App from './App' import { createStore } from 'redux' import { counter } from './redux/reducers' import { Provider } from 'react-redux'const store = createStore(counter) ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root') )

• App.jsx

import React, { Component, createRef } from 'react' import { connect } from 'react-redux' import * as actions from './redux/action' class App extends Component {constructor(props) {super(props)this.selectRef = createRef()}compute = (method) => {const selectDom = this.selectRef.current,selectVal = Number(selectDom.value);// 使用傳入的props.actions this.props[method](selectVal)}render() {// 將App改造為UI組件const { count } = this.propsconsole.log('【app】', this)return (<><h1>數(shù)值：{count}</h1><select ref={this.selectRef}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={() => this.compute('add')}>+</button>&nbsp;<button onClick={() => this.compute('minus')}>-</button>&nbsp;<button onClick={() => this.compute('add_odd')}>奇數(shù)加</button>&nbsp;<button onClick={() => this.compute('add_delay')}>延遲加</button></>)} } // 用connect函數(shù)處理App再暴露出去 export default connect(state => ({count: state // 這里的state是從redux容器中獲取到的數(shù)據(jù)}),{ ...actions }// 要解構(gòu)出來(lái)！否則props里拿不到// 這樣即可在App這個(gè)UI組件里通過(guò)this.props.actions來(lái)使用 )(App)

connect方法接收2個(gè)參數(shù)

函數(shù)mapStateToProps，建立state對(duì)象到props對(duì)象的映射關(guān)系
（redux store里的state可以通過(guò)UI組件的props獲取）

mapDispatchToProps，建立一個(gè)store.dispatch方法到props對(duì)象的方法
（redux里面action creators創(chuàng)建的函數(shù)可以通過(guò)props獲取）

使用中間件

reducer：純函數(shù)，只承擔(dān)計(jì)算state的功能
view：與state意義對(duì)應(yīng)
action：存放數(shù)據(jù)的對(duì)象，只能被別人操作？
同步：action發(fā)出后，reducer立即計(jì)算出state
異步：action發(fā)出后，過(guò)段時(shí)間再執(zhí)行reducer
中間件：一個(gè)函數(shù)，對(duì)store.dispatch方法進(jìn)行改造，在發(fā)出action和執(zhí)行reducer兩步之間添加了其他功能

• index.js（引入中間件）

import ReactDOM from 'react-dom' import App from './App' // 引入中間件 import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' import { counter } from './redux/reducers' import { Provider } from 'react-redux'const store = createStore(counter, applyMiddleware(thunk)) ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root') )

• reducer.js（只有同步方法）

export function counter(state = 0, action) {const { type, data } = actionswitch (type) {case 'add':return state + datacase 'minus':return state - datacase 'add_odd':if (data % 2 !== 0) {return state + data}// 這里面沒(méi)有異步方法default:return state} }

• action.js (增加異步方法)

export function add(param) {return {type: 'add', // 方法名data: param // 對(duì)應(yīng)參數(shù)} } export function minus(param) {return {type: 'minus',data: param} } export function add_odd(param) {return {type: 'add_odd',data: param} } // 改造成異步action export function add_delay(param) {return dispatch => {setTimeout(() => {dispatch(add(param))}, 1000)} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的2 中间件的使用、异步action的创建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。