第一步，定義乙個 action 方法用於獲取資料
// 引入actiontype宣告
import
from
'./actiontypes'
// 引入axios工具
import
from
'@utils/service'
// 定義獲取資料的介面
const loginapi =
'/api/user/login'
// 定義action方法，丟擲乙個action物件
export
function
loginaction
(options)
}
// 引入actiontype宣告
import
from
'@action/actiontypes'
// 定義預設資料
const defaultvalue =
// 定義reduce方法，此方法必須是乙個純函式
export
default
function
reduxdemo
(state = defaultvalue, action)
}// 失敗則返回異常資訊
return
default
:return state
}}
/**
* combinereducers 接受乙個由reducer組成的物件, 將其轉換成乙個純函式
* compose store增強, 意思就是往我們的store中增加新的方法
* createstore 用於建立乙個store庫
*/import
from
'redux'
// 中介軟體，乙個用於redux的promise外掛程式, 修改了store.dispatch方法，使它能接受乙個promise做為引數
import promise from
'redux-promise'
// 中介軟體，仍然是用於處理非同步的外掛程式，修改了store.dispatch方法，使它能接受乙個函式作為引數
import thunk from
'redux-thunk'
// 引入reducer, 這個reducer是由多個reduce組成的物件
import reducer from
'@reducer'
// 加入redux瀏覽器除錯工具
const composeenhancers = window.__redux_devtools_extension_compose__ || compose
// 建立乙個story
const store =
createstore
(combinereducers
(reducer)
,// 中介軟體的引入(composeenhancers, 可以認為它就是compose)
composeenhancers
((promise, thunk)))
export
default store
// 引入connect方法,用於將store和action嵌入我們的元件props中
import
from
'react-redux'
// 引入我們第一步中完成的action
import
from
'@action/logindemo'
export
default
// 使用裝飾器將connect方法繫結到類元件中
@connect
(// 第乙個引數是store返回給我們的狀態樹, 可以通過props.state拿到
state =>},
// 第二個引數是乙個actions的物件，頁面中所有需要觸發的action都需要放在這裡面
)class
logindemo
extends
purecomponent
=this
.props
// 這個是我們的action, 已經在react-redux中註冊過了, 直接呼叫, 不需要dispatch
const
=this
.props
//...其它邏輯**
}
Redux 非同步操作
最近狀態不太好，學習redux的非同步操作花的時間比想象的多，這裡盡量清晰簡要的表述一下在redux中怎麼實現非同步操作。先回顧一下同步操作 我們用redux執行同步的時候，都是先發起乙個dispatch actioncreator 1.先在actioncreator 中生成乙個action物件。2...
Redux非同步方案實現
一 不借用第三方庫實現redux非同步 場景建立 先來個很常見的場景，在http請求之前我們一般會用loading元件來表示資料正在請求，等http請求結束就關閉loading。下圖所示的是http請求的3種狀態 上述場景如果不使用redux狀態管理器，我們會使用react的state或hooks特...
Redux 處理非同步 Action
redux promise utils是乙個基於redux thunk和redux actions的工具，符合 fsa 規範，方便開發者處理非同步 action，減少大量冗餘的 template redux 一開始的設計就是用於處理同步的 action。通過呼叫 action 函式後 dispatc...