javascript - 如何在 Redux api 调用期间在组件上设置加载 bool 值

Question

我正在创建一个基于 React 的项目, Redux和 Redux-Thunk .

在下面的示例中，我列出了每个“项目”并允许用户“增量”(对 API 进行 1 秒的假调用)并更新 MainApp 组件上的状态(以显示加载)

问题:如何捕获 incrementProject 操作直接完成到 MainApp 组件中的情况？

我搜索了很多相关内容，但没有找到任何内容。处理此类情况的最佳方法是什么？

想法:

• 将所有状态创建到 Redux 项目存储中并全局处理所有加载状态？ (我担心代码会变得更重:/)

• 将回调发送到 incrementProject(projectId, next) 并在分派(dispatch)错误或成功后从操作中调用它？

<小时/>

我没有包含所有操作/reducers/api 调用，因为它是非常基本的代码。

主应用程序组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect, Provider } from 'react-redux';

import { requestProjects, incrementProject } from '../actions';

class MainApp extends Component {

  constructor(props) {
    super(props);
    this.state = { loadingProjectsIds: [] };
  }
  componentDidMount() {
    const { requestProjects } = this.props;
    requestProjects();
  }

  render() {

    const { projectStore, incrementProject } = this.props;
    const { loadingProjectsIds } = this.state;

    const incrementProject = (project) => {
      let ids = this.state.loadingProjectsIds;
      ids.push(project._id);
      this.setState({
        loadingProjectsIds: ids
      });

      incrementProject(project._id);
    }

    return (
      <ul>
          {projectStore.projects.map(project => (
            <li key={`project-${project.key}`}>
              {project.name} 
              {
                loadingProjectsIds.indexOf(project._id) !== -1) 
                ? Incrementing...
                : <a>Increment</a>
              }
            </li>
          ))}
      </ul>
    );
  }
};

export default connect((state) => { project } = state), (dispatch) => ({
  requestProjects: () => dispatch(requestProjects()),
  incrementProject: (_id) => dispatch(incrementProject(_id)),
})(MainApp);

增量操作

export function incrementProject(projectId) {
  return async dispatch => {
    dispatch({type: 'PROJECT_INC', projectId});

    let { err, payload } = await API.incProject({projectId});

    if (err) {
      dispatch({type: 'PROJECT_INC_ERR', err});
    }
    else {
      dispatch({type: 'PROJECT_INC_SUCCESS', payload});
    }
  };
};

Answer 1

没有最好的解决方案。一切都取决于谁对正在调度给定的操作感兴趣。一种更通用的方法(我们使用的)是在您的 reducer 中具有 TOGGLE_LOADING 操作和 loading 属性。像这样的事情

const initialState = {
    value : '',
    loading: false,
    error: false
}

export const reducer = (state = initialState, action) =>{
    switch(action.type){
        case 'TOGGLE_LOADING' : return{
            ...state,
            loading : !state.loading
        }

        case 'STORE_VALUE' : return{
            ...state,
            loading: false
        }

        case 'ERROR_FETCHING' : return{
            ...state,
            loading : false,
            error: true,
        }

        default : return state
    }
}

在你的 Action 创建者内

const fetchValue = () =>{
    return dispatch =>{
        dispatch({type: 'TOGGLE_LOAD'})
        apiCall()
            .then(value =>{
                dispatch({type: 'STORE_VALUE'})
            })
            .catch(error =>{
                dispatch({type: 'FETCH_ERROR'})
            })
    }
}

现在您已经在 state 中配置了一个 loading 属性。只需在您的组件中使用它

   class Component extends React.Component{
    componentDidMount(){
        fetchValue()
    }

    render(){
        const { loading } = this.props
        return loading ? 'Loading' : <Content />
    }
}