3

在 Redux 中做某种旋转指标的理想方法是什么？

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

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

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

这就是我所拥有的

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

但是，这isPending: true是为了什么动作？得到？放？删除？邮政？如果我让所有这些动作都依赖于同一个属性，isPending: true那么奇怪的事情就会开始发生，例如 => 当我执行 a 时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
    }
  }
};

看起来方法不对

4

1 回答 1

2

如果您只想知道请求是否处于待处理状态以及正在使用什么方法（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
}

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

于 2016-03-04T11:10:07.630 回答