使用redux-thunk和cross-fetch处理Redux中的异步Action-GX博客-分享个人 Full-Stack JavaScript 项目开发经验、前端在线工具、Sass、Bootstrap、Grunt、Gulp、webpack、React、Node.js、Git、Koa、MySQL、Nginx、Docker、Kubernetes、Jenkins、SEO、网络安全、CentOS 7

使用redux-thunk和cross-fetch处理Redux中的异步Action

创建 2019-03-02 15:08，修改 2020-08-29 06:36，作者 leeguangxing.cn，阅读数：5007

客户端与服务器交互都存在延时问题，这使得用于改变数据源的 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 中间件：

1
2
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;
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

编写异步 Action 生成器，如：

1
2
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());
            });
    }
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

值得注意：

redux-thunk 能够区分普通 Action 和 thunks Action，所以普通的 Action 生成器可以按照原来的方式返回 Action。
thunks Action 允许你在返回的函数中调用多个 dispatch 来分发多个 Action。
使用 fetch 时有不少常规代码，所以我们可以对它进一步封装。
你需要为其它浏览器添加 fetch 及相关的 polyfill。

cross-fetch 的用法上跟标准 fetch 一样，要了解更多 fetch 的使用说明，请点击这里。

GX博客

使用redux-thunk和cross-fetch处理Redux中的异步Action

版权声明：

寄语

最近发表或修改

最热文章