Блог

Главная - Вопросы по программированию - Как я могу лучше структурировать свои данные в состоянии redux?

Как я могу лучше структурировать свои данные в состоянии redux?

#javascript #reactjs #redux

#javascript #reactjs #redux

Вопрос:

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

songData() here возвращает массив из множества объектов song.

Вот почему [0] здесь, в currentSong: { currentSongData: songData()[0] },

Это мое состояние redux:

 const initState = {
  allSongs: songData(),
  currentSong: { currentSongData: songData()[0] },
  isPlaying: false,
  isLibraryOpen: false,
  songTimer: [
    {
      currentTime: 0,
      duration: 0,
    },
  ],
};

Всякий раз, когда мне нужно получить доступ к чему-либо в текущей песне, я должен написать что-то вроде:

 currentSong.currentSongData.name

или, если я определяю currentSong как currentSong: [songData()[0]], тогда, как:

 currentSong[0].name

Есть ли лучший способ определить состояние redux, в котором мне не нужно писать такие длинные вещи, когда я получаю доступ к данным?

Я хочу получить к нему доступ, написав

 currentSong.name

Кстати, это структура объекта song.

       {
        name: 'Cold Outside',
        cover: 'https://chillhop.com/wp-content/uploads/2020/09/09fb436604242df99f84b9f359acb046e40d2e9e-1024x1024.jpg',
        artist: 'Nymano',
      },

Комментарии:

1. было бы лучше записать результат songData() в переменную, чтобы избежать ненужного повторного запуска

Ответ №1:

Вы можете использовать нотацию распространения свойств

 currentSong: { ...songData()[0] }

Комментарии:

1. Я бы предложил: currentSong: songData()[0]

2. Я согласен, это намного лучше)

3. @AlekseyPolonkaAlex Я сделал это в первый раз. Но я упоминал выше, что мне пришлось писать currentSong[0].name , чтобы получить доступ к имени

Ответ №2:

Я бы предпочел сохранить идентификатор ключа currentSong, из которого вы могли бы извлечь содержимое его данных allSongs . в противном случае вы будете дублировать данные, чего лучше избегать. таким образом, в начальном состоянии у вас будет currentSongId: songData()[0].id

итак, как бы вы справились с этим в своих функциях? вы можете использовать useSelector . эта функция позволяет вам фильтровать ваши данные, чтобы вы правильно их использовали. в вашем функциональном компоненте вы бы извлекли:

 // at your component function
const selectedSong = useSelector(state => state.allSongs.filter(({ id }) => id === state.currentSongId))

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

Метки: