Redux學習總結二

參考阮一峰redux教程

//新增日誌功能

let next = store.dispatch;
store.dispatch = function dispatchandlog(action)

##二、中介軟體的用法

import createlogger from 'redux-logger';

const logger = createlogger();

const store = createstore(

reducer,);

return (createstore) => (reducer, preloadedstate, enhancer) => ;

chain = middlewares.map(middleware => middleware(middlewareapi));

dispatch = compose(...chain)(store.dispatch);

return

}}上面**中，所有中介軟體被放進了乙個陣列chain,然後巢狀執行，最後執行store.dispatch(),由此可知，中介軟體內部（middlewareapi）可以拿到getstate和dispatch這兩個方法。

##四、非同步操作的基本思路

非同步操作要發出三種不同的action

1. 操作發起時的action

2. 操作成功時的action
3. 操作失敗時的action

let state = ;

1. 操作開始時，送出乙個action,觸發state更新為"正在操作"狀態，view重新渲染；

2. 操作結束後，再送出乙個action,觸發state更新為"操作結束"狀態，view再一次重新渲染；

##五、redux-thunk中介軟體

系統自動傳送第二個action例子：

componentdidmount() = this.props

dispatch(fetchposts(selectedpost))

}// ...

注：載入成功後(componentdidmount方法)，它發出了(dispatch方法)乙個action,向伺服器要求資料fetchposts(selectedsubreddit),這裡fetchposts就是action creator。

const fetchposts = posttitle => (dispatch, getstate) => .json`)

.then(response => response.json())
.then(json => dispatch(receiveposts(posttitle, json)));
};};// 使用方法一
store.dispatch(fetchposts('reactjs'));
// 使用方法二
store.dispatch(fetchposts('reactjs')).then(() =>
console.log(store.getstate())
);

注：由於fetchposts返回了乙個函式，而普通的action creator預設返回乙個物件，且普通action creator的引數是action的內容。

import thunk from 'redux-thunk';

import reducer from './reducers';

// note: this api requires redux@>=3.1.0

const store = createstore(

reducer,);

##六、redux-promise中介軟體

另一種非同步操作的解決方案就是讓action creator返回乙個promise物件，這時就需要使用redux-promise中介軟體。

import promisemiddleware from 'redux-promise';

import reducer from './reducers';

const store = createstore(

reducer,

);

這個中介軟體使得store.dispatch方法可以接受promise物件作為引數，這時action creator有兩種寫法。

1. 返回值為乙個promise物件

const fetchposts = 

(dispatch, posttitle) => new promise(function (resolve, reject) .json`)
.then(response => );
});

import  from 'redux-actions';

componentdidmount() = this.props
// 發出同步 action
dispatch(requestposts(selectedpost));
// 發出非同步 action
dispatch(createaction(
'fetch_posts', 
fetch(`/some/api/$.json`)
.then(response => response.json())
));}

Redux學習總結一

參考阮一峰部落格 redux教程 web應用是乙個狀態機，檢視與狀態是一一對應的。所有狀態都儲存在乙個物件裡面。store是儲存資料的地方，可以將其看成乙個容器，整個應用只能有乙個store.state是store物件的某個時點的資料集合，當前時刻的state可以通過store.getstate 得...

Redux 學習筆記（二）

要將 redux 和 react 結合起來使用，就還需要一些額外的工具，其中最重要的是 react redux react redux 提供了兩個重要的物件，provider 和 connect，前者使 react 元件可被連線 connectable 後者把 react 元件和 redux 的 s...

Redux 學習筆記（二）

高階元件 簡單的說，高階元件就是乙個函式，這個函式接收乙個元件作為輸入，返回乙個元件作為結果，因此，新返回的元件擁有了輸入元件所不具備的功能。import react from react render this.props export default removeuserprop const n...