在使用redux之前我們需要先安裝 redux和redux-thunk
yarn add redux redex-thunk
安裝完成後,我們還需要了解rudex的工作流程
首先,使用者發出 action。
store.dispatch(action);
然後,store 自動呼叫 reducer,並且傳入兩個引數:當前 state 和收到的 action。 reducer 會返回新的 state 。
state 一旦有變化,store 就會呼叫監聽函式。
// 設定監聽函式
store.subscribe(listener);
listener可以通過store.getstate()得到當前狀態。如果使用的是 react,這時可以觸發重新渲染 view。
function listerner()
**
本文請求的資料來自小度**
首先使用
來建立乙個新的react
同時在src資料夾中新建乙個stroe資料夾
接下來就是在store資料夾中分別建立 index.js reducer.js和你要管理的資料夾,本文的是詳情頁模組的資料。在prodect資料夾中分別建立actioncreators.js reducer.js state.js type.js四個檔案。如圖所示:
在index.js檔案中
import thunk from 'redux-thunk'
import reducer from './reducer'
export default store
在reducer.js檔案中寫
在actioncreators.js中的aixos我們使用了http進行了一次分裝,以及對請求資料設定了反向**。
反向**檔案setupproxy.js
// target: '',
changeorigin: true
}))}
reducer.js
state.jsimport state from './state.js'
import * as type from './type.js'
const reducer = (previousstate = state,action) =>
switch (action.type)
return newstate
}export default reducer
type.jsconst state =
export default state
export const get_prodect='get_prodect'
為了使用起來更加規範,我們還需要封裝乙個檔案get_prodect.js。
經過以上的幾部簡單操作之後,我們的redux就已經配置完成了,接下來 我將要使用它進行請求資料。import from 'react-redux'
import from 'redux'
const getprodect = () => )(uicomponent)
}export default getprodect
這樣我們就可以在請求到詳情頁中的資料,實現動態傳參。import react, from 'react'
import getprodect from 'utils/get_store/get_prodect'
import actioncreators from 'store/prodect/actioncreators'
class product extends component
//這一步非常重要,如果沒有判斷資料是否存在,將會報錯提示沒有資料。)}
componentdidmount())
}}export default getprodect()
C winform post請求資料
其原理是,利用winfrom模擬表單提交資料,將要提交的引數提交給網頁,網頁執行 得到資料,然後winform程式將網頁的所有源 讀取下來,這樣就達到windows應用程式和web應用程式之間傳參和現實資料的效果了。首先建立乙個windows應用程式和web應用程式。在web應用程式中,將網頁切換到...
PHPcurl請求資料
php curl post請求和get請求 獲取的引數 api key 8a82d53a57b06c1d835d129f7e43d49c ordernum pdo fetch select ddlm order no from tablename ewei shop order where id g...
angular請求資料
get請求import from angular common http 2 在元件中引入模組並宣告 constructor private http httpclient 3 呼叫函式 ngoninit post請求import from angular common http 2 在元件中引入模...