Redux 中的 Spinner 加载

Question

在 Redux 中执行某种旋转指示器的理想方法是什么？

假设我有一个名为 Things 的 REST API。在 React 组件中，我有 Thing Card、Thing Card List 和 Add Thing Form.

如果我想每次都旋转一个微调器，理想的方法是什么： *) GET Things 来自服务器 *) PUT Thing/123 到服务器 *) DELETe Thing/123 来自服务器 *) POST Thing 到服务器

我知道这个想法几乎是在 Redux Store 中设置一个名为 isPending: true 的状态。

这就是我的

store = {
  things: {
     data: [], // array of things
     isPending: true,
     isSuccess: false,
     isError: false,
     error: undefined
  }
};

可是，这个isPending: true是为了什么动作呢？得到？放？删除？ POST？如果我使所有这些操作都依赖于相同的属性 isPending: true，那么奇怪的事情就会开始发生，例如 => 当我执行 POST Things 时，isPending 对片刻，依赖于该属性的其他组件也显示了它们的微调器。

这是我的代码

import _ from 'lodash';
import Api from '../../utils/api';

export const thingApi = new Api({ 
  url: '/api/things',
  token: localStorage.getItem('token')
});

// ------------------------------------
// Constants
// ------------------------------------
export const GET_THING_PENDING = 'GET_THING_PENDING';
export const GET_THING_SUCCESS = 'GET_THING_SUCCESS';
export const GET_THING_FAILURE = 'GET_THING_FAILURE';
export const POST_THING_PENDING = 'POST_THING_PENDING';
export const POST_THING_SUCCESS = 'POST_THING_SUCCESS';
export const POST_THING_FAILURE = 'POST_THING_FAILURE';
export const DELETE_THING_PENDING = 'DELETE_THING_PENDING';
export const DELETE_THING_SUCCESS = 'DELETE_THING_SUCCESS';
export const DELETE_THING_FAILURE = 'DELETE_THING_FAILURE';

// ------------------------------------
// Actions
// ------------------------------------
export const getThing = () => {
  return (dispatch, getState) => {
    dispatch(getThingPending());
    return thingApi.get()
      .then(({ data }) => {
        dispatch(getThingSuccess(data));
      })
      .catch(({ error }) => {
        dispatch(getThingFailure(error));
      });
  };
};

export const postThing = ({ name }) => {
  return (dispatch, getState) => {
    dispatch(postThingPending());
    const body = { name };
    return thingApi.post({ data: body })
      .then(({ data }) => {
        dispatch(postThingSuccess(data));
      })
      .catch(({ error }) => {
        dispatch(postThingFailure(error));
      });
  };
};

export const deleteThing = (_id) => {
  return (dispatch, getState) => {
    dispatch(deleteThingPending());
    return thingApi.delete({ 
      url: `/api/things/${_id}`
    }).then((res) => {
        dispatch(deleteThingSuccess(_id));
      })
      .catch(({ error }) => {
        dispatch(deleteThingPending(error));
      });
  };
};

export const getThingPending = () => ({
  type: GET_THING_PENDING
});

export const getThingSuccess = (things) => ({
  type: GET_THING_SUCCESS,
  payload: things
});

export const getThingFailure = (error) => ({
  type: GET_THING_FAILURE,
  payload: error
});

export const postThingPending = () => ({
  type: POST_THING_PENDING
});

export const postThingSuccess = (thing) => ({
  type: POST_THING_SUCCESS,
  payload: thing
});

export const postThingFailure = (error) => ({
  type: POST_THING_FAILURE,
  payload: error
});

export const deleteThingPending = () => ({
  type: DELETE_THING_PENDING 
});

export const deleteThingSuccess = (_id) => ({
  type: DELETE_THING_SUCCESS,
  payload: _id
});

export const deleteThingFailure = (error) => ({
  type: DELETE_THING_FAILURE,
  payload: error
});

export const actions = {
  getThing,
  getThingSuccess,
  postThing,
  postThingSuccess,
  deleteThing,
  deleteThingSuccess
};

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [GET_THING_PENDING] (state, action) {
    return { 
      isPending: true,
      isSuccess: false,
      isFailure: false
    };
  },

  [GET_THING_SUCCESS] (state, { payload: data }) {
    return {
      isPending: false,
      isSuccess: true,
      data,
      isFailure: false
    };
  },

  [GET_THING_FAILURE] (state, { payload: error }) {
    return { 
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  },

  [POST_THING_PENDING] (state, action) {
    return {
      isPending: true,
      isSuccess: false,
      isError: false
    };
  },

  [POST_THING_SUCCESS] (state, { payload: data }) {
    debugger;
    return {
      isPending: false,
      isSuccess: true,
      data: [ ...state.data, data ],
      isError: false
    };
  },

  [POST_THING_FAILURE] (state, { payload: error }) {
    return {
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  },

  [DELETE_THING_PENDING] (state, action) {
    return {
      ...state,
      isPending: true,
      isSuccess: false,
      isFailure: false
    };
  },

  [DELETE_THING_SUCCESS] ({ data }, { payload: _id }) {
    const index = _.findIndex(data, (d) => d._id === _id);

    const newData = [
      ...data.slice(0, index),
      ...data.slice(index + 1)
    ];

    return {
      isPending: false,
      isSuccess: true,
      data: newData,
      isFailure: false
    };
  },

  [DELETE_THING_FAILURE] (state, { payload: error }) {
    return {
      isPending: false,
      isSuccess: false,
      isFailure: true,
      error
    };
  }

};

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = {
  isPending: false,
  isSuccess: false,
  data: [],
  isFailure: false,
  error: undefined
};

export default function thingReducer (state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type];

  return handler ? handler(state, action) : state;
}

那么，如果我需要为每个操作表示微调器（或错误），我该怎么办？

我应该做类似的事情吗

store = {
  things: {
    get: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    post: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    put: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    },
    delete: {
      data: [],
      isPending,
      isError,
      isSuccess,
      error
    }
  }
};

看起来方法不对

Answer 1

如果您只想知道如果一个请求处于待处理状态并且正在使用什么方法（get/post/put/delete），您可以将方法类型与您所在州的其余部分一起存储，例如：

{
  data: [],
  isPending: true,
  method: 'POST',
  isSuccess: false,
  isError: false,
  error: undefined
}

然后你可以在你的组件中检查它，例如：

const { isPending, method } = this.state;

if (isPending && method === 'POST') {
  // Do your thing
}

不过，您可能不应该为方法类型使用字符串——而是使用常量。

Redux 中的 Spinner 加载

Spinner Loading in Redux

redux

redux-thunk

react-redux