react如何控制全局loading_React / Redux技巧：处理reducer中loading标志的更好方法

最近又重新开始做起React的网站来，在做的时候想添加骨架屏，之前添加的Skeleton骨架屏有些不够好用。因为每次请求的时候，都要设置Action并且修改reducer里面的isLoading的值，重写一个界面之后又再写一遍类似的代码。所以说很多人都说React冗余复杂，可能就是复杂在这些上面吧。

于是我搜索了一下，发现了一个很好用的方法，自己用了一下觉得真的很好用，就翻译过来。

以下是原文。

目的： 使用单独的reducer存储所有的isFetching标志，而不是每个reducer都存储isFetching而污染了reducer。

相信，每个人使用React作为前端，并将Redux用于状态管理的时候，并且每当应用都有一定复杂程度的时候，我们可能会遇到如下代码。

// todo/actionCreators.js

export const getTodos = (dispatch) => () => {

dispatch({ type: 'GET_TODOS_REQUEST' });

return fetch('/api/todos')

.then((todos) => dispatch({ type: 'GET_TODOS_SUCCESS', payload: todos })

.catch((error) => dispatch({ type: 'GET_TODOS_FAILURE', payload: error, error: true });

};

// todo/reducer.js

const initialState = { todos: [] };

export const todoReducer = (state = initialState, action) => {

switch(action.type) {

//我用的是isLoading

case 'GET_TODOS_REQUEST':

return { ...state, isFetching: true };

case 'GET_TODOS_SUCCESS':

return { ...state, isFetching: false, todos: action.payload };

case 'GET_TODOS_FAILURE':

return { ...state, isFetching: false, errorMessage: action.payload.message };

default:

return state;

}

};

当您的应用程序需要更多的API调用时，此代码才能正常工作。并且，将近一半的代码都是我们要处理的 isFetching / errorMessage 的代码。(写重复的代码难免会有些疲惫 )

加载Loading Reducer

在StashAway中，我们通过创建一个减少负载的方法来解决此问题，该方法存储所有API请求状态:

// api/loadingReducer.js

const loadingReducer = (state = {}, action) => {

const { type } = action;

const matches = /(.*)_(REQUEST|SUCCESS|FAILURE)/.exec(type);

// 如果不是 *_REQUEST / *_SUCCESS / *_FAILURE actions, 我们就将它们忽略

if (!matches) return state;

const [, requestName, requestState] = matches;

return {

...state,

// 存储当前是否正在发生请求

// 例如：当收到GET_TODOS_REQUEST的时候，isFetching为true

// 当收到GET_TODOS_SUCCESS / GET_TODOS_FAILURE的时候，isFetching为false

[requestName]: requestState === 'REQUEST',

};

};

然后我们可以通过组件调用选择器访问那些加载状态。 原作者使用lodash，下面有原生JS的做法。

// api/selectors.js

import _ from 'lodash';

export const createLoadingSelector = (actions) => (state) => {

// 仅在未加载所有action时返回true

return _(actions)

.some((action) => _.get(state, `api.loading.${action}`));

};

// components/todos/index.js

import { connect } from 'react-redux';

import Todos from './Todos';

import { createLoadingSelector } from '../../redux/api/selectors';

// GET_TODOS_REQUEST时，显示正在加载。

const loadingSelector = createLoadingSelector(['GET_TODOS']);

const mapStateToProps = (state) => ({ isFetching: loadingSelector(state) });

export default connect(mapStateToProps)(Todos);

另一种不用lodash的方法

// api/selectors.js

import _ from 'lodash';

export const createLoadingSelector = actions => state =>

actions.some(action => state.loading[action]);

//actions.some(action => state.get("loading")[action]); 如果用immutable

由于我们不需要维护任何isFetching标志，因此我们的reducer只需要关心存储数据，所以代码更加简单：

// todo/reducer.js

const initialState = { todos: [] };

export const todoReducer = (state = initialState, action) => {

switch(action.type) {

case 'GET_TODOS_SUCCESS':

return { ...state, todos: action.payload };

default:

return state;

}

};

这样基本上就好了，虽然在这个测试代码中，显得没有那么简化，但是当您的应用程序要求您向超过20个API发送请求时，这就会让您的生活变得更加轻松一些了。

我们可以合并API调用吗？

当在构建一个真实的应用程序时，我们可能需要结合API调用(例如：当getUser和getTodos请求都成功时，才显示代办事项页面)。这种方法很简单：

// components/todos/index.js

import { connect } from 'react-redux';

import Todos from './Todos';

import { createLoadingSelector } from '../../redux/api/selectors';

// 当 GET_TODOS_REQUEST, GET_USER_REQUEST 中的任意一个处于active时，显示正在加载

const loadingSelector = createLoadingSelector(['GET_TODOS', 'GET_USER']);

const mapStateToProps = (state) => ({ isFetching: loadingSelector(state) });

export default connect(mapStateToProps)(Todos);

那，错误信息处理呢?

处理API错误消息与处理加载标志类似，除了在选择要显示的消息时：

// api/errorReducer.js

export const errorReducer = (state = {}, action) => {

const { type, payload } = action;

const matches = /(.*)_(REQUEST|FAILURE)/.exec(type);

// 如果不是 *_REQUEST / *_FAILURE action, 我们就将其忽略

if (!matches) return state;

const [, requestName, requestState] = matches;

return {

...state,

// 存储 errorMessage

// 例如：当接收到 GET_TODOS_FAILURE 时存储 errorMessage

// 否则在收到 GET_TODOS_REQUEST 时清除 errorMessage

[requestName]: requestState === 'FAILURE' ? payload.message : '',

};

};

// api/selectors.js

import _ from 'lodash';

export const createErrorMessageSelector = (actions) => (state) => {

// 返回操作的第一条错误消息

// *我们假设当任何请求失败时，

// 需要多个API调用，我们显示第一个错误

return _(actions)

.map((action) => _.get(state, `api.error.${action}`))

.compact()

.first() || '';

};

当然，错误信息处理同样可以不用lodash

// api/selectors.js

export const createErrorMessageSelector = actions => (state) => {

const errors = actions.map(action => state.error[action]);

if (errors && errors[0]) {

return errors[0];

}

return '';

};

就像编程中许多事物一样，有很多方式处理React / Redux。这只是我的首选方式。

我们一直都在努力寻找改善的方法！

原文完。

注：在使用loadingReducer时，用combineReducer将loadingReducer进行管理。这里引入之后，通过React Developer Tools可以查看Redux state中的变化。

// store/reducer.js

import { combineReducers } from "redux-immutable";

const reducer = combineReducers({

loading: loadingReducer

});

export default reducer;

在加载请求的时候，执行REQUEST action后，再发请求。

// /components/todos/store/actionCreators.js

import axios from "axios";

const setTodos= (payload) => ({

type: "GET_TODOS_SUCCESS",

payload

});

const getTodosRequest = () => ({

type: "GET_TODOS_REQUEST"

});

export const getTodos = () => {

return (dispatch) => {

dispatch(getTodosRequest()); // 这里正在请求

axios.get("/api/todos").then((res)=>{

dispatch(setTodos(res.data.payload));

}).catch((e)=>{

console.log(e);

});

}

};

大概就是这些了，希望这些能够简化您的Redux代码。