Путать о конструкции состояния реактивного редуктора - PullRequest
Новая
       7

Путать о конструкции состояния реактивного редуктора

0 голосов
/ 28 апреля 2018

Например, у меня есть редуктор для управления состоянием пользователя, например создание пользователя, редактирование, выборка пользователя.

я должен создать состояние для каждого действия, например: 

{
  loadingForFetching: false,
  fetchingResult: null,
  fetchingError: '',

  loadingForEditing: false,
  editingResult: null,
  editingError:'',

  loadingForCreating: false,
  creatingResult: null,
  creatingError: ''
}

Или пусть три действия находятся в одном и том же состоянии: 

{
   loading: false,
   result: null,
   error: ''
}

Я думаю, что общий доступ - плохая идея, потому что при одновременном извлечении и создании пользователя, если одно действие завершено, установив загрузку на false, это может ввести в заблуждение и другое действие, которое также завершено. Тем не менее, случай использования является редким, может быть, я слишком волнуюсь

Я прав?

Ответы [ 3 ]

0 голосов
/ 28 апреля 2018

Если вы хотите сохранить статус загрузки в своем состоянии, то лучше использовать шаблон счетчика, но не флаг true / false. 

const loadingReducer = (state = 0, action) => {
    if (action.type === 'LOADING_FOR_EDITING' ||
        action.type === 'LOADING_FOR_CREATING' ||
        ...) {
        return state + 1;
    }
    if (action.type === 'LOADING_FOR_EDITING_SUCCESS' ||
        action.type === 'LOADING_FOR_CREATING_SUCCESS' ||
        ...) {
        return state - 1;
    }
    return state;
};

// root reducer:
export default combineReducers({
     loading: loadingReducer,
     loadedData: loadedDataReducer,
     // ...etc
});

Теперь в ваших компонентах вы можете проверить состояние загрузки, например, вот так const isLoaded = state.loading === 0;

Этот подход позволяет управлять несколькими асинхронными запросами.

0 голосов
/ 29 апреля 2018

Это структура данных. Пока я использую 

{
  targetState: {
    data: [{id: 1...}, {id: 2} ... ],
    loading: false,
    loaded: false,
    error: null,
    ... // you could put more information if you like, such activeTarget etc
  }
}

если там больше вложенных данных, необходимо рассмотреть нормализацию формы состояния. https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

Надеюсь, это поможет.

0 голосов
/ 28 апреля 2018

Я не думаю, что данные типа «загрузка» или «ошибка» принадлежат глобальному хранилищу данных, и их лучше хранить как состояние локального компонента. Он не является постоянным и не должен быть необходим другим компонентам. Единственное, что я могу поместить в глобальное хранилище данных, это сам пользовательский объект, потому что к нему могут обращаться другие компоненты.

...