redux axios請求資料

2021-09-24 21:12:34 字數 3002 閱讀 2697

在使用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

import state from './state.js'

import * as type from './type.js'

const reducer = (previousstate = state,action) =>

switch (action.type)

return newstate

}export default reducer

state.js

const state = 

export default state

type.js

export const get_prodect='get_prodect'
為了使用起來更加規範,我們還需要封裝乙個檔案get_prodect.js。

import  from 'react-redux'

import from 'redux'

const getprodect = () => )(uicomponent)

}export default getprodect

經過以上的幾部簡單操作之後,我們的redux就已經配置完成了,接下來 我將要使用它進行請求資料。

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 在元件中引入模...