分享个人 Full-Stack JavaScript 项目开发经验
客户端与服务器交互都存在延时问题，这使得用于改变数据源的 Action 有时候会是异步的。一般的 Action 生成器会返回一个对象形式的 Action，在使用redux-thunk中间件后，它允许你返回一个包含异步请求的函数作为 Action。文中异步请求使用了cross-fetch，它可以兼容 Node.js、浏览器和 React Native 中使用 fetch API 。
安装 redux-thunk：
yarn add redux-thunk安装 cross-fetch：
yarn add cross-fetch在构建 Redux 的 Store 时，应用 redux-thunk 中间件：
import {applyMiddleware, combineReducers, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import initialState from './initialState';
import reducers from '../reducers';
const configureStore = () =>
createStore(
combineReducers(reducers),
initialState,
applyMiddleware(thunkMiddleware)
);
export default configureStore;编写异步 Action 生成器，如：
import fetch from "cross-fetch";
// ......
export const my_thunk_action_create = (data) =>
// 返回函数中接收 Store 的 dispatch 和 getState 方法作为参数
(dispatch, getState) => {
// 分发第一个 Action
dispatch(show_loading());
// 返回一个异步请求
return fetch('your_request_url', {
method: 'post',
headers: {
// 告诉服务器客户端实际所发送的数据类型
'Content-Type': 'application/json',
// 非标准请求头，用于告诉服务器请求的方式为 Ajax
'x-requested-with': 'XMLHttpRequest'
},
// 与 'Content-Type' 相对应
body: JSON.stringify(data),
// 为同源请求发送凭据
credentials: 'same-origin'
})
.then(res => {
if (res.status >= 400) {
throw new Error("Bad response from server");
}
// 获取响应的JSON内容
// 这里不直接 return res.json(); 是为了让 catch 可以捕获它的错误
// 如网络出错时候，res.json() 将会抛出一个异常
const resJson = res.json();
return resJson;
})
.then(json => {
// 根据服务器响应结果，分发另外一些 Action
dispatch(hide_loading());
if(json.err) {
//...
} else {
//...
}
})
.catch(err => {
// 当 then 中出现异常时捕获
console.error('Fetch error occurred.', err);
// 当异常发生时，往往需要给用户提示，并把恢复 UI
// dispatch(response_error());
});
}值得注意：
cross-fetch 的用法上跟标准 fetch 一样，要了解更多 fetch 的使用说明，请点击这里。