Инициируйте данные с лучшим подходом - PullRequest
Новая
       31

Инициируйте данные с лучшим подходом

0 голосов
/ 21 ноября 2019

Привет, ребята. Я пытаюсь получить исходные данные для redux магазина из заданного api!

. Вот мой первый подход с использованием store.dispatch: 

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";
import { fetchNews } from "./actions";

const store = createStore(
    reducer,
    compose(
        applyMiddleware(thunk),
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

store.dispatch(fetchNews());

export default store;

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

import React from "react";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
import { useSelector, useDispatch } from "react-redux";
import New from "./New";
import { fetchNews } from "../store/actions";

const Main = () => {
    const news = useSelector(state => state.news);
    const dispatch = useDispatch();
    React.useEffect(() => {
        dispatch(fetchNews());
    }, [dispatch]);
    return (
        <>
            {news.length > 0 ? (
                news.map(data => (
                    <New key={data.id} subTitle={data.created_at}>
                        {data.title}
                    </New>
                ))
            ) : (
                <p>News not found</p>
            )}
        </>
    );
};

Хорошо, оба метода работают, но я действительно хочу знать, какой подход лучше или есть какой-то другой лучший метод! спасибо!

Ответы [ 3 ]

5 голосов
/ 21 ноября 2019

Диспетчерское действие из метода жизненного цикла компонента является рекомендуемым подходом, и его следует придерживаться, чтобы сохранить проект разделения проблем, на котором основан Redux, пожалуйста, проверьте прилагаемое изображение. Redux Principles

2 голосов
/ 21 ноября 2019

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

Кстати, в вашем useEffect попробуйте удалить диспетчер из массива переменных: 

React.useEffect(() => {
  dispatch(fetchNews());
}, []);

Таким образом он будет извлекать данные при монтировании компонента, как ComponentDidMount.

0 голосов
/ 21 ноября 2019

Я бы не сказал, что диспетчеризация из жизненного цикла компонента является рекомендуемым подходом, он, конечно, используется многими разработчиками, но он объединяет ваш компонент с извлечением данных (это хорошая идея)? Или ваш компонент не знает о том, как данные извлекаются, и просто использует их каким-то образом. Ваш выбор.

Вы можете использовать свое собственное промежуточное программное обеспечение для отправки запроса. При таком подходе вы получаете большую гибкость, вы можете отправлять такие действия, как type: LOADING_DATA и любые другие, в зависимости от состояния настройки при загрузке ваших данных. Как только данные возвращены, отправьте другое действие (действия), которое может быть выполнено другим пользовательским промежуточным программным обеспечением (ями) для нормализации данных и т. Д. И, наконец, отправьте их вашему редуктору.

Этот подход очень хорошо описан в https://leanpub.com/thinking-in-Redux или https://www.youtube.com/watch?v=JUuic7mEs-s

Мне лично понравились его идеи, и, возможно, вы найдете их полезными.

...