八十六、推薦組件的redux-thunk異步解決方案、Ajax獲取推薦數(shù)據(jù)

@Author：Runsen

今天我們來看一個(gè) Redux 官方出品的 middleware 庫：redux-thunk。

Redux官方實(shí)現(xiàn)的異步解決方案----Redux-Thunk

Redux-Thunk和前面寫過的Redux和React-Redux其實(shí)都是Redux官方團(tuán)隊(duì)的作品，他們的側(cè)重點(diǎn)各有不同:

Redux：是核心庫，功能簡單，只是一個(gè)單純的狀態(tài)機(jī)，但是蘊(yùn)含的思想不簡單，是傳說中的“百行代碼，千行文檔”。

React-Redux：是跟React的連接庫，當(dāng)Redux狀態(tài)更新的時(shí)候通知React更新組件。

Redux-Thunk：提供Redux的異步解決方案，彌補(bǔ)Redux功能的不足。

比如，當(dāng)我聚焦的時(shí)候，推薦組件需要出現(xiàn)，搜索框需要拉長。這里涉及了兩種函數(shù)，需要使用redux-thunk異步。

安裝redux-thunk：cnpm install redux-thunk

import {createStore,compose, applyMiddleware} from 'redux' import thunk from 'redux-thunk' import reducer from './reducer' // reduxredux中的高級(jí)用法 引入redux-thunk 異步 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(reducer,composeEnhancers( applyMiddleware(thunk) )) export default store;

1

2

3

4

5

6

7

8

9

index.js代碼如下。

import React ,{Component} from 'react' import { CSSTransition } from 'react-transition-group' import { connect } from 'react-redux' import {actionCreators} from './store' import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, SearchWrapper, Addition, Button, SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoItem, SearchInfoList, } from './style' class Header extends Component{ getListArea() { const {focused, list} = this.props if (focused) { return ( 熱門搜索 換一批 {list.map((item) => { return {item} })} ) }else{ return null } } render() { const {focused, handleInputFocus,handleInputBlur} = this.props return (

  寫文章 注冊 ) } } const mapStateToProps = (state) => { return { // state.getIn是immutable fromJS的用法 相當(dāng)于 // state.get('header').get('focused') focused: state.getIn(['header','focused']), list: state.getIn(['header','list']) } } const mapDispathToProps = (dispatch) => { return { handleInputFocus() { dispatch(actionCreators.getList()); dispatch(actionCreators.searchFocus()); }, handleInputBlur() { dispatch(actionCreators.searchBlur()); } } } export default connect(mapStateToProps, mapDispathToProps)(Header);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

Ajax獲取推薦數(shù)據(jù)

在actionCreators中有一個(gè)getList，來獲取推薦數(shù)據(jù)。我們需要使用Ajax獲取推薦數(shù)據(jù)。

React 只是使用 props 和 state 兩處的數(shù)據(jù)進(jìn)行組件渲染。

個(gè)人推薦 axios，這也是本文所使用的。不過，認(rèn)真的說，如果你偏偏不喜歡它，那就選其他的唄，比如Promise。

安裝：cnpm install axios --save

import * as constants from './constants' import axios from 'axios' import {fromJS} from 'immutable' export const searchFocus = () =>({ type: constants.SERACH_FOCUS }) export const searchBlur = () =>({ type: constants.SERACH_BLUR }) const changList = (data) => ({ type: constants.CHANGR_LIST, // fromJS處理 data: fromJS(data) }) export const getList = () =>{ return (dispatch) => { axios.get('/api/headerList.json').then((res) => { const data = res.data dispatch(changList(data.data)) }).catch(()=>{ console.log('error') }) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

import * as constants from './constants' import {fromJS} from 'immutable' const defaultState = fromJS({ focused: false, list: [] }); // eslint-disable-next-line import/no-anonymous-default-export export default (state = defaultState, action) => { // eslint-disable-next-line default-case switch(action.type) { case constants.SERACH_FOCUS : return state.set('focused',true); case constants.SERACH_BLUR : return state.set('focused',false); case constants.CHANGR_LIST : return state.set('list',action.data) } return state; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Ajax Redux

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。