Могу ли я использовать asyn c await в функциональном компоненте, чтобы заменить необходимость в redux-thunk? Также контейнерные компоненты остаются стандартом? - PullRequest
Новая
       37

Могу ли я использовать asyn c await в функциональном компоненте, чтобы заменить необходимость в redux-thunk? Также контейнерные компоненты остаются стандартом?

0 голосов
/ 08 апреля 2020

С добавлением крючков в реакцию кажется, что наличие компонентов контейнера дает меньше преимуществ. Вместо этого мы можем использовать useSelector и useDispatch непосредственно в нашем компоненте. Это хорошая идея? Кроме того, я пытаюсь понять преимущества по-прежнему использования Redux-Thunk. Почему бы просто не использовать asyn c await в моем компоненте и затем отправить действие оттуда? Я пытался найти ответы на эти вопросы, но что-то тесно связанное выглядело устаревшим Пожалуйста помоги. Поэтому вместо чего-то вроде этого: 

export const fetchAllPosts = () => async dispatch => {
    try {
        let res = await axios.get("/posts");
        dispatch(receivePosts(res.data.posts))
    } catch (err) {
        dispatch(receivePostErrors(err.message)))
    }
}

const Posts = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchAllPosts())
    }, [])

    const posts = useSelector(state => state.posts)

    return( 
        <div>
            <ul>
                {posts.map(post => {
                    return <li key={post.id}>{post.title}</li>
                })}
            </ul>
        </div>
    )
}

Сделайте что-то подобное и избегайте громов: 

const Posts = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const fetchAllPosts = async () => {
            try {
                let res = await axios.get("/posts")
                dispatch(receivePosts(res.data))
            } catch (err) {
                dispatch(receivePostsErrors(err.message))
            }
        }

        fetchAllPosts()
    }, [])

    const posts = useSelector(state => state.posts)

    return( 
        <div>
            <ul>
                {posts.map(post => {
                    return <li key={post.id}>{post.title}</li>
                })}
            </ul>
        </div>
    )
}

Спасибо!

...