Как работать с редукторами Redux и серверным API - PullRequest
Новая
       5

Как работать с редукторами Redux и серверным API

0 голосов
/ 30 января 2020

Как лучше создать редукторы с handleActions в redux-действиях: 1. Создать редукторы для каждой операции CRUD (например, добавить данные, удалить данные) и объединить их. Как установить initialState в этом случае? 2. Установить действия в одном редукторе (fetchDeleteDataRequest, fetchDeleteDataSuccess, fetchAddDataRequest, fetchAddDataSuccess в качестве примера)?

1 Ответ

0 голосов
/ 30 января 2020

Вы можете иметь отдельные редукторы и / или обычные редукторы для добавления или удаления данных, которые вам решать. Если вы рассматриваете отдельные действия для add и delete , вам нужно будет поддерживать согласованность данных. Но наличие общей функции для работы с операциями CRUD является идеальным, поскольку это уменьшит объем кода, который вы должны использовать, но вам также потребуется способ различать guish их (возможно, в обход некоторой переменной * 1005). * ДОБАВИТЬ или УДАЛИТЬ ). давайте рассмотрим и список пунктов, которые вы будете добавлять или удалять. Этот список может быть пустым массивом в начале ( initialState ) и передавать его как реквизиты вашему компоненту.

Действия 

export const addDeleteItem = data => dispatch => {
  // you can perform REST calls here
  dispatch({
    type: ADD_REMOVE_DATA,
    payload: data
  });
};

Редукторы 

let initialState = {
 items:[]
}

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_REMOVE_DATA:
      if(action.payload.event === 'ADD'){
        return {...state,items:[...state.items,action.payload.item]}
      }else if(action.payload.event === 'DELETE'){
        return {...state,items:state.items.filter(item=>item.id !== action.payload.item.id)}
      }else if (action.payload.event === 'UPDATE'){
       //handle your update code
      }
  }
}

Это всего лишь пример, которому вы можете следовать как избегайте дублирования кода.

...