实现 Redux 到 React 以从提供的端点返回 JSON 数据

Posted 2023-03-11

【中文标题】实现 Redux 到 React 以从提供的端点返回 JSON 数据

【英文标题】：Implementing Redux to React to return JSON data from provided endpoint

【发布时间】：2019-11-18 11:58:43

【问题描述】：

硬件任务要求我们使用 React、Redux 和 Redux-Thunk 从提供的名为 url 的端点返回 JSON 数据，该端点位于 excel 类型表中。

我能够通过使用 React Hooks 和 Axios 在表格中返回适当的数据，正如您将在代码框中看到的那样。

CODE DEMO

在这种组合中实现 Redux 和 Thunk 的简单方法是什么？

我的想法可能是：

为 Redux 设置 store.js 以创建 store 并初始化 state

创建 Action 文件夹 => 创建 dataActions.js => 使用 Axios 获取请求编写具有 useEffect 方法的操作函数

创建 Reducer 文件夹 => 创建 dataReducer.js => 编写一个初始化状态的 reducer => 导出默认函数，该函数具有一个 switch 语句，该语句返回检索到的数据的状态，然后是其他任何内容的默认语句

所有这些无关的 Redux/Thunk 添加是为了看看我是否能够将所有部分连接在一起，即使我们不需要它来完成这个特定的任务。不知道如何将这 2 个合并到解决方案之上。

如果有任何建议或提示让我走上正轨，我将不胜感激。

【问题讨论】：

Hooks 用于 React，Redux 是另一个工具。 redux action 是获取的正确位置，所以只需这样做，使用 axios 获取。 redux-thunk 中间件可以创建一个处理 axios 承诺的函数操作，并分派一个带有数据的简单 Redux 操作，reducer 应处理该操作以存储该数据。

将这样的内容分成dataActions.js 有意义吗？我认为我的主要问题是将所有内容分开。

@EmileBergeron imgur.com/Btt6Nmf

你可以把你的动作放在你喜欢的任何地方，理想情况下，是的，在另一个文件中，这样它们就与你的渲染逻辑隔离了。

查看react-redux，了解如何将 Redux 存储连接到 React 组件。

【参考方案1】：

基本上要将您的示例转换为使用 Redux，您应该：

创建reducer，它将接受操作并修改存储。

这里是例子

const initalState = 
    usersData: [],
    isLoading: false,
    isError: false,
    errorMsg: ""
;

function reducer(state = initalState, action) 
    switch (action.type) 
        case "REQUEST_USERS_DATA":
            return 
                ...state,
                isLoading: true,
                isError: false,
                errorMsg: ""
           ;
        case "RECEIVE_USERS_DATA":
            return 
                ...state,
                usersData: action.usersData,
                isLoading: false,
                isError: action.isError,
                errorMsg: action.errorMsg
            ;
        default:
            return state;
     

创建action creator 以请求用户数据

export const requestUsers = url => async dispatch => 
    dispatch(
        type: "REQUEST_USERS_DATA"
    );
    try 
        const json = await axios.get(url);
        dispatch(
            type: "RECEIVE_USERS_DATA",
            usersData: json.data,
            isError: false,
            errorMsg: ""
        );
     catch (e) 
        dispatch(
            type: "RECEIVE_USERS_DATA",
            usersData: [],
            isError: true,
            errorMsg: e
        );
    
;

Action 创建者将向 reducer 发送操作，并使用 axios 请求数据。

使用thunk middleware 创建存储，以便能够将函数作为操作分派。

export const store = createStore(reducer, applyMiddleware(thunkMiddleware));

在App 组件中使用<Provider store=store> 为所有孩子提供存储。

提取渲染逻辑到单独的组件，比如TableComponent，它将调度动作并从 Redux 接收数据。 Redux 现在支持it own hooks，因此您可以使用useSelector 和useDispatch 以钩子样式访问Redux。

const  usersData, isError, isLoading, errorMsg  = useSelector(
    state => state
);
const dispatch = useDispatch();

这里是working sample。

【讨论】：

一个好的操作标准是redux-actions 和redux-thunk-actions，以避免手动创建这些异步操作。

@EmileBergeron 对于硬件，他们希望通过 Jest 进行单元测试，你认为 sufficient unit testing 会是什么？这个问题也适用于任何人

难道不需要同时使用 redux-thunk-actions 和 axios 吗？

@mph85 axios 是一个 HTTP 客户端，而 redux-thunk-action 包装了 redux 异步操作管理的逻辑（SUCCEED、FAILED、ENDED 操作类型）。完全不同的库。