Javascript 实现Redux以响应从提供的端点返回JSON数据

HW分配要求我们使用React、Redux和Redux Thunk从excel类型表中提供的名为

url

的端点返回JSON数据

正如您将在codesandbox中看到的，我能够通过使用React挂钩和Axios在表中返回适当的数据

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

我的想法可能是：

• 为Redux设置store.js以创建存储并初始化状态

• Create Action folder=>Create dataActions.js=>编写一个具有Axios get请求的useEffect方法的操作函数

• Create Reducer folder=>Create dataReducer.js=>编写一个Reducer，初始化state=>export default函数，该函数有一个switch语句，返回检索到的数据的状态，然后是其他任何内容的默认语句

所有这些额外添加的Redux/Thunk都是为了看看我是否能够将所有部分连接在一起，即使我们不需要它来完成这个特定的任务。不确定如何在解决方案的顶部合并这两个

---

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

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

创建将接受操作和修改存储的

下面是一个例子

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;
     }
}

为请求用户创建数据

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 creator将向reducer发送操作，并使用axios请求数据

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

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

使用

应用程序
组件中的
为所有儿童提供存储

提取渲染逻辑以分离组件，例如

TableComponent

，它将分派操作并从Redux接收数据。Redux现在支持，因此您可以使用

useSelector

和

useDispatch

以钩子样式访问Redux

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

---

下面是。

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

创建将接受操作和修改存储的

下面是一个例子

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;
     }
}

为请求用户创建数据

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 creator将向reducer发送操作，并使用axios请求数据

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

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

使用

应用程序
组件中的
为所有儿童提供存储

提取渲染逻辑以分离组件，例如

TableComponent

，它将分派操作并从Redux接收数据。Redux现在支持，因此您可以使用

useSelector

和

useDispatch

以钩子样式访问Redux

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

---

以下是。

钩子用于React，Redux是另一种工具。redux操作是获取的正确位置，因此只需使用axios获取即可。redux thunk中间件可以创建一个处理axios承诺的函数操作，并对数据发送一个简单的redux操作，还原程序应该处理该数据来存储该数据。将类似的内容拆分为

dataActions.js

有意义吗？我认为我的主要问题是分离所有内容。@EmileBergeron您可以将您的操作放在任何您喜欢的地方，理想情况下，可以放在另一个文件中，这样它们就与渲染逻辑隔离开来。看看如何将Redux存储连接到React组件。挂钩用于React，Redux是另一个工具。redux操作是获取的正确位置，因此只需使用axios获取即可。redux thunk中间件可以创建一个处理axios承诺的函数操作，并对数据发送一个简单的redux操作，还原程序应该处理该数据来存储该数据。将类似的内容拆分为

dataActions.js

有意义吗？我想我的主要问题是把一切都分开。@Emilebergron你可以把你的行动放在任何你喜欢的地方，理想情况下，是的，在另一个文件中，因此它们与渲染逻辑隔离。请查看如何将Redux存储连接到React组件。操作的一个好标准是避免手动创建这些异步操作。@EmileBergeron对于硬件，他们希望通过Jest进行单元测试，您认为

充分的单元测试将意味着什么？这个问题是针对任何人的，难道不需要同时使用redux thunk操作和axios吗？@mph85 axios是一个HTTP客户端，而redux thunk操作将redux异步操作管理的逻辑包装起来（
成功
，
失败
，
结束
操作类型）。完全不同的库。操作的一个好标准是避免手动创建这些异步操作。@Emilebergron对于硬件，他们希望通过Jest进行单元测试，您认为充分的单元测试

意味着什么？这个问题是针对任何人的，难道不需要同时使用redux thunk操作和axios吗？@mph85 axios是一个HTTP客户端，而redux thunk操作将redux异步操作管理的逻辑包装起来（

成功

，

失败

，

结束

操作类型）。完全不同的图书馆。