Question

目前，在我的反应应用中获取数据时，我使用redux商店中的属性isFetching来显示微调器。通过调度3个操作来更新isFetching属性。

This is how the reducer looks
=============================

const posts = (state = {}, {type, payload}) => {
  switch(type) {
    case FETCH_POSTS: return Object.assign({}, state, { isFetching: true });
    case FETCH_POSTS_SUCCESS: return Object.assign({}, state, { isFetching: false });
    case FETCH_POSTS_FAILURE: return Object.assign({}, state, { isFetching: false });
    default: return state;
  }
}

This is how the action creator looks
====================================

const fetchPosts = ({ shouldFetchInBackground }) => dispatch => {
  !shouldFetchInBackground && dispatch({ type: FETCH_POSTS });

  fetchUserPosts()
    .then(() => {
      dispatch({ type: FETCH_POSTS_SUCCESS });
    })
    .catch(() => {
      !shouldFetchInBackground && dispatch({ type: FETCH_POSTS_FAILURE });
    });
}

我在这里做的是从组件中传递一个标记shouldFetchInBackground，告诉操作创建者不要发送FETCH_POSTS和FETCH_POSTS_FAILURE个动作（我＆＃39; m也不关心在背景中完成提取时显示错误），这样就不会显示微调器。

现在我唯一担心的是，这是否是正确的方法，或者我应该让动作创建者发送所有动作并处理组件本身中微调器的显示/隐藏（通过使用组件状态）。

非常感谢任何帮助。感谢。

Answer 1

使用redux状态处理微调器的显示和隐藏isFetching是一个完全精细的模式。这是一个例子。

export const handleFetchTodos = () => async dispatch => {
  dispatch({ type: FETCHING_TODOS });
  try {
    const response = await api.fetchTodos();
    dispatch({ type: FETCHING_TODOS_SUCCESS, todos: response });
  } catch (e) {
    dispatch({ type: FETCHING_TODOS_ERROR, error: e.message });
  }
};

const initialState = {
  isFetching: false,
  error: "",
  todos: []
};

const todoAppReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCHING_TODOS:
      return {
        ...state,
        isFetching: true
      };
    case FETCHING_TODOS_ERROR:
      return {
        ...state,
        isFetching: false,
        error: action.error
      };
    case FETCHING_TODOS_SUCCESS:
      return {
        ...state,
        isFetching: false,
        error: "",
        todos: action.todos
      };
    default:
      return state;
  }
};

Answer 2

在与我的主管讨论后，我得出结论，在后台获取内容的正确方法是让动作创建者调度所有动作（FETCH_POSTS，FETCH_POSTS_SUCCESS，FETCH_POSTS_FAILURE）并处理微调器的显示/隐藏在组件本身中（比如在组件状态中使用标志shouldFetchInBackground）。

我是如何得出这个结论的？
Well Redux依赖于单一来源的原则，我们在商店中有isFetching标志，告诉应用程序是获取数据。但是当我们停止动作创建者发送FETCH_POSTS动作时，它不会更新存储和商店中的isFetching标志将是假的，但实际上我们正在抓取一些东西。这与单一来源事实的概念相矛盾。因此，正确的方法是让动作创建者调度所有动作，以便商店正确告诉我们某些事情正在被抓住。

希望这会有所帮助。感谢。

在react / redux应用程序中在后台获取数据的同时调度操作（有条件）的正确方法

2 个答案: