Решение ДЗ 8-го урока и доработка 7-го#12
Conversation
|
|
||
| const UsersList = props => { | ||
| //у меня строчка ниже получается вообще не используемая. | ||
| const [usersList, setUserList] = useState([]); |
There was a problem hiding this comment.
вот тут у меня никак не получается отправить результата dispatch'a в usersList...
There was a problem hiding this comment.
а зачем? dispatch отправляет action редюсеру, который меняет стор, а за изменением стора следит компонент Provider - он перерисовывает приложение и предоставляет данные UsersList в качестве свойств объекта props
| //у меня не получается в usersList отправить данные, полученные через props.dispatch(fetchUsers()); | ||
| //закомментированный хук ниже не знаю как правильно переписать | ||
| // useEffect(() => { | ||
| // const usersData = props.dispatch(fetchUsers()); |
There was a problem hiding this comment.
мы не сохраняли результат выполнение dispatch:)
| // }; | ||
| // }, []); | ||
| //как неправильное решение этой проблемы, в итоге в return просто обращаюсь напрямую к props. | ||
| //А надо ведь использовать данные из [usersList, setUserList] |
There was a problem hiding this comment.
почему?) Приложение реагирует на изменение массива в store, а не в state, лишний раз копируете данные:)
| props.dispatch(fetchUsers()); | ||
| }, []); | ||
|
|
||
| //вот здесь - мне приходится применять map к props.users, а должно быть usersList.map |
There was a problem hiding this comment.
у вас все правильно:) props.users здесь подходит)
С Redux можно вообще state только у store'a хранить, но лучше, конечно, и локальный state компонентов использовать в определенных местах
| import {fetchUser} from '../actions/userActions'; | ||
|
|
||
| const UserProfile = props => { | ||
| const [userInfo, setUserInfo] = useState(['']); |
There was a problem hiding this comment.
| const [userInfo, setUserInfo] = useState(['']); |
убираем:)
| const [userInfo, setUserInfo] = useState(['']); | ||
|
|
||
| useEffect(() => { | ||
| setUserInfo(props.dispatch(fetchUser(props.params.userId))); |
There was a problem hiding this comment.
| setUserInfo(props.dispatch(fetchUser(props.params.userId))); | |
| props.dispatch(fetchUser(props.params.userId)); |
вы могли бы написать setUserInfo(props.user), но смысла нет:)
2 participants
Лев, снова здравствуйте!
У меня возник ряд вопросов по выполнению домашки и по React вцелом:
В решении ДЗ 8-го урока я так и не поняла, как реазультат useEffect(() => {
props.dispatch(fetchUsers()); }, []); отправить в const [usersList, setUserList] = useState([]);, посмотрите, пожалуйста, закомментированные строчки в файле UsersList.js в папке AlexandraYashina\Homework_8\functional_components\src\components.
Буду также благодарна, если посмотрите доработанный 7-й урок (папка AlexandraYashina\Homework_7_updated), я переписала все оставшиеся компоненты из 5-го урока также на Redux и поправила Ваши замечания.
Вот мы создаем две папки: components и pages. Я никак не могу понять логику того, почему такое разграничение? В pages вроде как должны лежать шаблоны страниц.
Но при этом на уроке 5 в файле pages/User.js у нас идет запрос на получение данных пользователя через axios - а компонент в components/User.js как раз занимается чисто отрисовкой (т.е. по сути шаблоном страницы). Потом вот ДЗ по уроку 7: Вы мне написали, что components/User.js должен только отрисовывать (без каких-либо action'ов и изменения состояния в store). При этом компонент componens/UsersList у нас спокойно dispatch'ит action'ы. Может это я туплю, и просто не понимаю логику? Может надо просто переместить components/User.js в папку pages? Или какая логика тут должна быть? При этом components/Menu.js и components/MenuItem.js
у нас тоже чисто отрисовывают, но при этом лежат в components.
Если я делаю блог таким образом, что на странице "Пользователи" у меня есть блок с данными пользователя, а при клике на имя пользователя, открывается страница с таким же блоком, но и плюс еще добавляется кнопка "Показать комментарии": стоит ли просто задублировать часть кода, отвечающую за отрисовку блока, или можно каким-то образом делать проверку, какой компонент (какая страница) запрашивает этот код, и в зависимости от этого уже рисовать кнопку или не рисовать?
Правильно ли я понимаю отличие props от state: props - это свойства компонента, которые приходят из-вне. Они постоянны на момент отрисовки компонента. А state - это состояние компонента (свойство), которое мы уже может в пределах компонента изменить.
Я надеюсь, это мои последние вопросы, и спасибо Вам большое за ответы и за курс вцелом!!! :)