React書城小案例

2021-09-02 22:35:05 字數 2437 閱讀 9762

步驟1:api介面設定

步驟2 通過axios 設定好獲取資料的方法

import axios from 'index.js';

const getbanner =()=>;

let initparams = ;

const getcourselist = (params=initparams)=>)

};const getcourseinfo = (courseid)=>})

};export

步驟3: 使用設定好的axios方法 處理action
import * as types from "../action-types";

import from "../../api/course";

//定義actioncreator方法

let coursebanner = ()=> = await getbanner();

dispatch()

}};let courselist = (params={},replace=true)=>;

return async (dispatch)=>);

}};let courseloading = ()=>

};export ;

步驟4: 通過redux-aciotn中的handleactions處理reducer
//例子:

let course = handleactions(}})

import * as types from "../action-types";

import from "redux-actions";

let initstate = ;

let course = handleactions(

},[types.course_list]:(state,action)=> = action;

if(replace);

}else;}},

[types.course_isloading]:(state,action)=>

}},initstate);

export default course;

步驟5:通過store下的index.js 匯出需要store
import  from 'redux';

import course from './course';

let reducer = combinereducers();

export default reducer;

步驟6:去到對應的元件進行操作

//在元件渲染之前 獲取相應的資料 例:輪播圖資料和課程資料

}render() = this.props;

return alt="" onclick=);}}

/>})}

:null

}=item;

return

}) :}

,false)

}}>載入更多

}

}}//執行actioncreator函式才表示派發指令

export default connect((state)=>

},actions.course)(course);

react基礎事件 小案例

事件的繫結 三種方法 方法不加括號 事件帶括號會自動執行方法 普通執行事件不帶括號 this.方法 將函式改為箭頭函式 方法加括號 this.方法.bind this 用bind將當前的this傳過去 在constructor 中寫 this.方法 this.方法.bind this 事件的引數傳遞...

React 小案例 列表新增刪除功能

import react,from react class todolist extends component handlebtncilck handleinputchange e handleitemclick index render export default todolist複製 thi...

C 小案例 廚房案例

題目描述 小白想嘗試一些新的料理,每個料理需要一些不同的材料,問完成所有的料理需要準備多少種不同的材料。輸入描述 每個輸入包含 1 個測試用例。每個測試用例的第 i 行,表示完成第 i 件料理需要哪些材料,各個材料用空格隔開,輸入只包含大寫英文本母和空格,輸入檔案不超過 50 行,每一行不超過 50...