Лучшая структура магазина Redux

Неучтенная структура хранилища Redux затрудняет написание эффективного или читаемого кода.
Иногда вам может потребоваться серьезный рефакторинг, если эти недостатки обнаружатся в середине разработки.
Поверьте мне. Я прошел через это.
Я собираюсь поделиться некоторыми советами по определению структуры Redux Store.

Используйте класс модели для initialState

Вместо объявления начального состояния как объекта в редукторе следует объявить класс модели и использовать экземпляр для начального состояния.
Это внесет ясность в структуру магазина из любой точки вашего проекта, чтобы вы или ваши коллеги выиграли Не запутайтесь, какое свойство может быть установлено или получено.
Кроме того, вы можете перенести логику обновления из редуктора в модель и написать для нее какой-нибудь тест.

Для случая, как показано ниже.

const initialState = {
  title: null,
  author: null
}
function book (state = initialState, action) {
  switch (action.type) {
    case 'SET_TITLE':
      return {...state, title: action.title}
    case 'SET_AUTHOR':
      return {...state, author: action.author}
    default:
      return state
  }
}

Лучше иметь такой класс.

class Book {
  constructor (title, author) {
    this.setTitle(title || null)
    this.setAuthor(author || null)
  }
  setTitle (title) {
    this.title = title
    return this
  }
  setAuthor (author) {
    this.author = author
    return this
  }
}

Используйте его для создания экземпляра начального состояния редуктора. Для обновления значений создайте новый объект с помощью метода в модели.

function book (state = new Book(), action) {
  switch (action.type) {
    case 'SET_TITLE':
      return state.setTitle(action.title)
    case 'SET_AUTHOR':
      return state.setAction(action.author)
    default:
      return state
  }
}

Однако здесь есть больше возможностей для улучшения. Может быть проще поддерживать класс модели, расширив класс Record до Immutable.js, чтобы вы могли использовать предопределенные удобные методы и сохранять неизменность.

Используйте объект "ключ-значение" для хранения итеративных элементов

Вместо использования массива для хранения итеративных элементов используйте объект «ключ-значение» для их хранения, чтобы вы могли снизить вычислительные затраты при последовательном извлечении указанного элемента.

Если вы намереваетесь иметь массив, как показано ниже.

{
  books: [
    {
      id: 'b1',
      name: 'Lean React',
      author: 'Don Juan'
    },
    {
      id: 'b2',
      name: 'React Thinking',
      author: 'William Shakespeare'
    },
    {
      id: 'b3',
      name: '3 minutes React',
      author: 'Nicolaus Copernicus'
    }
  ]
}

Лучше использовать вместо этого Object.

{
  books: {
    b1: {
      name: 'Lean React',
      author: 'Don Juan'
    },
    b2: {
      name: 'React Thinking',
      author: 'William Shakespeare'
    },
    b3: {
      name: '3 minutes React',
      author: 'Nicolaus Copernicus'
    }
  }
}

Вы можете увидеть преимущества этого, когда у вас будет огромный набор данных.
Как и в случае с массивом, даже вы можете перемещаться по всем элементам с помощью usingObject.keys.

Object.keys(books).forEach(key => {
  const book = books[key]
  console.log('name', book.name)
  console.log('author', book.author)
})

Сделайте его как можно более плоским

Если у вас есть глубокое гнездо в структуре, будет сложно делать что-либо вроде извлечения, обновления или удаления. И что еще хуже, иногда он создает дубликаты данных.

Для случая, как показано ниже.

{
  owners: {
    o1: {
      name: 'Jhon',
      books: {
        b1: {
          name: 'Lean React',
          author: 'Don Juan'
        },
        b2: {
          name: 'React Thinking',
          author: 'William Shakespeare'
        }
      }
    },
    o2: {
      name: 'Sam',
      books: {
        b2: {
          name: 'React Thinking',
          author: 'William Shakespeare'
        },
        b3: {
          name: '3 minutes React',
          author: 'Nicolaus Copernicus'
        }
      }
    }
  }
}

Это можно нормализовать вот так.

{
  owners: {
    o1: {
      name: 'Jhon',
      bookIds: [
        'b1',
        'b2'
      ]
    },
    o2: {
      name: 'Sam',
      bookIds: [
        'b2',
        'b3'
      ]
    }
  },
  books: {
    b1: {
      name: 'Lean React',
      author: 'Don Juan'
    },
    b2: {
      name: 'React Thinking',
      author: 'William Shakespeare'
    },
    b3: {
      name: '3 minutes React',
      author: 'Nicolaus Copernicus'
    }
  }
}

Таким образом, вы можете сделать его плоским ради удобства обслуживания данных хранилища redux.