Теперь добавим компонент, который будет элементом списка Lists. Добавим его в папке src/containers/Lists/List. Сначала добавим вспомогательный метод getWordsCount в файле src/containers/Lists/List/helpers.js. Это метод первым аргументом будет получать список слов, а вторым - имя списка....
У элемента FlatList контейнера Lists должна быть определенны свойства data и renderItem для отображения элементов списка. Свойство data должно равняться свойству lists контейнера. А метод renderItem должен возвращать компонент List со свойствами: createdAt и listKey....
Подключим компонент List к хранилищу. Нужно в компонент List передать только поле WORDS. Только при его передаче в компонент надо переименовать на words. Эта задача — часть курса по Full-Stack JavaScript....
Поработаем над контейнером AddingListOrWord. На этом экране будет одно поле ввода, и введенное значение надо будет где-то хранить. Для этого используй useState. Сам контейнер AddingListOrWord должен возвращать SafeAreaView со стилями:...
Проработаем контейнер Words, который должен возвращать два SafeAreaView элементами. Первый со стилями: flex - 1, backgroundColor - colors.blue1, а второй: flex - 0, backgroundColor - colors.blue1. Дальше все элементы будут добавляться в первый SafeAreaView....
Поработаем над методами redux. Но сначала добавим нужные константы в файл src/external/redux/constants. API, FETCH_WORD_ENDPOINT, ADD_WORD, SET_ERROR, SET_LOADING - значение всех констант равняется их имени. А потом добавь экспорт функции getFetchWordEndpoint в файл src/external/redux/helpers....
Данные надо где-то хранить. Для этого давай использовать библиотеку @react-native-async-storage/async-storage. Напишем две функции для сохранения и чтения данных в файле functions.js в корне проекта. Назовем эти функции setStorage для сохранения и readStorage для чтения....
Теперь добавим немного начального кода для хранилища redux. Установи библиотеки redux, react-redux и redux-thunk. В файле src/external/redux/constants.js создай три константы ADD_LIST, LISTS, WORDS. Значение каждой константы должно быть такое же, как и ее название....
Добавим нужные константы в файл src/external/redux/constants. DELETE_LIST, DELETE_WORD - значение всех констант равняется их имени. Экспортируй из файла src/external/redux/actions еще две функции: deleteWord, deleteList и setLoading. Возвращать каждая должна объект с полями type и payload....
Добавь константу SET_STORAGE_DATA в src/external/redux/constants, равную ее же имени. Добавь readAsyncStorage функцию в файл src/external/redux/actions и экспортируй ее. Этот метод должен возвращать асинхронную функцию с одним аргументом dispatch. В замыкании сначала читаем с помощью readStorage данные для ключей LISTS и WORDS....