react 漸學(四) redux,redux-thunk, redux-saga, react-redux;
單純的react只是一個檢視層框架,寫專案是還需要資料管理工具redux;
安裝使用
npm install --save redux
英文好的看githup https://github.com/reduxjs/redux;
src目錄下建立資料夾store
新建 index.js 和 reducer.js
index.js
import { createStore } from 'redux';
import reducer from './reducer'
const store = createStore(reducer);
export default store;
createStore 建立Store的api
reducer.js
const defaultState = {
inputValue: '123',
list: []
}
export default (state = defaultState) => {
return state;
}
初始的store 中state的初始值
reducer是一個純函式(給定固定的輸入值,就會有一定的輸出,且無任何副作用);
reducer的作用就是返回給 store 一個資訊 讓store修改資料
在元件中獲得store資料
在reduce中初始值
const defaultState = {
inputValue: '123',
list: [1, 2, 3]
}
在元件中獲取資料
import Store from './store'
使用store提供的getState()方法獲取資料
渲染 展示
元件中修改store中資料
輸入框繫結方法
handleInputChange(e) {
const val = e.target.value;
const action = {
type: 'change_input_value',
value: val
}
Store.dispatch(action)
}
建立 action
通過store提供的dispatch()方法,將元件定義action反應給Store,Store查詢reducer
reducer接收action 根據action.type做出反應
因為Sotre是唯一的,且只有store自己可以改變自己的內容 所以在 reducer裡對state做了一次copy
const newstate = JSON.parse(JSON.stringify(state));
可以看到store資料已經改變了 但是元件的資料沒有重新整理
store提供了subscribe()來重新整理元件資料
定義方法
handleStoreChange() {
this.setState(Store.getState())
}
在constructor中新增
Store.subscribe(this.handleStoreChange)
這樣元件就資料就重新整理了
至此store常用的4個方法就全部使用了
createStore(): 建立store
getState():元件獲取store中的資料
dispatch():元件傳遞資訊給store(store在傳遞給reducer,reducer返回資訊給store;store做出改變)
subscribe():元件根據store更新資料
actionCreator和actionTypes
在store資料夾下建立 actionCreator.js&actionTypes
actionTypes.js
actionCreator.js
相應的reducer和元件也做改變
這樣寫的好處是便於管理,出錯了也會log出來。。。
再說說著這
元件要更新資料 呼叫actionCreater方法 dispatch給store, store 傳給reducer ,reducer做出反應, store改變,通過subscribe給元件資料
redux中介軟體
react專案中的中介軟體一般都是redux的中介軟體。。。不是react本身的中介軟體;
這裡中介軟體都是action與reducer之間的
redux-thunk
安裝
npm install --save redux-thunk
使用
因為還要相容redux在chrome的外掛 所以麻煩點
這是不使用中介軟體請求模擬資料
用Charles 模擬的
使用thunk
直接在actionCreator中進行資料請求
在元件中
直接調取在actionCreator中定義的getdatalist方法 然後dispatch就可以了
redux-thunk簡單的解釋就是讓actioncreator的方法中不僅僅可以返回一個物件 還可以是一個函式,如果是物件的話會直接丟給store在到reducer中做處理,如果是函式的話就會先執行函式再丟給store到reducer中做處理;
redux-saga
安裝
npm install redux-sage --save
在store下建立sagas.js
在store index.js下引用saga
記得sagaMIddleware.run(sagas)哦
在元件中請求模擬的資料
使用redux-sage
在actioncreator 新建一個方法
在元件中呼叫
這裡不僅僅是reducer可以接受到這個dispatch這個action, 在saga也可以
在
function* mySaga() {
yield takeEvery(GET_INIT_DATA_INIT, getInitdata);
}
呼叫saga中 takeEvery()方法。 接收2個引數第一個是ation.type 另一個是接收到後呼叫generator函式名
通過
const res = yield axios.get('/api/todolist')
const action = initData(res.data)
得到請求資料 新建action
呼叫saga中 put函式將這個action 發給stroe給reducer做處理
redux-saga 簡單的來說攔截元件dispatch出的action 判斷action的type的來做出新的反應生成新的 action 返回給store
saga用的都是generator函式 比較不適應。。。提供的api也很多。。。
適合大專案使用。。。。。。。。小專案安心使用redux-thunk吧 簡單。。。
react-redux
安裝
npm install react-redux --save
使用
在專案的index.js 引用
使用react-redux 中Provider元件 包住使用store的元件 再把store 引入並使用
provider 就是連結store的一個提供器 讓其內部的元件都可以獲取store
在元件中使用react-redux提供的api connect()
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
connect(fuc1: store和元件的關聯, fuc2:對store資料修改的方法和dispacth關聯)(元件名)
這樣簡單的吧這個元件轉為無狀態元件
搞定 react的一般基礎就到這了 實戰吧乾巴爹