使用 redux 更好的方法启动数据

Question

大家好，我正在尝试从给定的 api 中获取 redux 商店的初始数据！

这是我使用 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>
            )}
        </>
    );
};

好的，这两种方法都有效，但我真的很想知道什么是更好的方法，或者还有其他更好的方法！谢谢！

Answer 1

第二个。您在其中创建商店的文件应该始终都是关于创建商店并将其按原样导出的。

顺便说一下，在你的 useEffect 上，尝试从变量数组中删除调度：

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

这样它会获取组件挂载的数据，就像ComponentDidMount。

Answer 2

从组件生命周期方法中调度操作是推荐的方法，也是为了保持 Redux 所基于的关注点分离设计应该遵循的方法，请查看附图。

Answer 3

我不会说从组件生命周期调度是推荐的方法，它肯定被许多开发人员使用，但它在您的组件中耦合了数据获取（这是个好主意）？或者您的组件是否应该不知道数据是如何获取的，而只是以某种方式使用它。您的选择。

您可以使用自己的自定义中间件来发送请求。使用这种方法，您将拥有更大的灵活性，您可以在加载数据时根据设置状态分派 type:LOADING_DATA 和任何其他操作。返回数据后，调度其他可由其他自定义中间件处理的操作以规范化数据等，最后将其发送到您的减速器。

这种方法在 https://leanpub.com/thinking-in-Redux or https://www.youtube.com/watch?v=JUuic7mEs-s

中有很好的描述

我个人很喜欢他的想法，也许你会发现它们有用。

使用 redux 更好的方法启动数据

Initiate data with redux better approach

javascript

reactjs

redux

redux-thunk

react-redux