使用钩子和 redux 工具包的 React-redux 调度操作 onclick

Question

对 redux、react-redux 和 redux 工具包相当陌生，但对 React 并不陌生，尽管我在钩子上摇摇欲坠。我试图通过单击按钮发送一个操作，这将使用单击按钮的值更新商店。我已经搜索了如何做到这一点，但现在我怀疑我正在考虑 React 中的问题，而不了解典型的 redux 模式，因为我所期望的可能只是在我找到的示例中没有完成。我应该怎么做呢？ onclick 似乎确实捕获了选择，但它没有传递给操作。我的目标是根据从 axios 获取调用路由列表收集的数据显示动态按钮列表。单击按钮后，应该单独调用 api 以获取特定于该单击按钮路由的数据。这是我目前设置的示例：

reducersRoutes.js

import { createSlice } from "@reduxjs/toolkit";
import { routesApiCallBegan } from "./createActionRoutes";

const slice = createSlice({
    name: "routes",
    initialState: {
        selected: ''
    },
{... some more reducers...}

        routeSelected: (routes, action) => {
            routes.selected = action.payload;
        }
    },
});

export default slice.reducer;

const { routeSelected } = slice.actions;

const url = '';

export const loadroutes = () => (dispatch) => {
    return dispatch(
        routesApiCallBegan({
            url,
{...}
            selected: routeSelected.type,
        })
    );
};

createActionRoutes.js

import { createAction } from "@reduxjs/toolkit";

{...some other actions...}
export const routeSelected = createAction("routeSelection");

components/routes.js:

import { useDispatch, useSelector } from "react-redux";
import { loadroutes } from "../store/reducersRoutes";
import { useEffect } from "react";
import { routeSelected } from "../store/createActionRoutes";
import Generic from "./generic";


const Routes = () => {
    const dispatch = useDispatch();
    const routes = useSelector((state) => state.list);
    const selected = useSelector((state) => state.selected);
useEffect(() => {
    dispatch(loadroutes());
}, [dispatch]);

const sendRouteSelection = (selection)  => {
    dispatch(routeSelected(selection))
}

return (
    <div>
        <h1>Available Information:</h1>
        <ul>
            {routes.map((route, index) => (
               <button key={route[index]} className="routeNav" onClick={() => sendRouteSelection(route[0])}>{route[1]}</button>
            ))}
        </ul>
        {selected !== '' ? <Generic /> : <span>Data should go here...</span>}
    </div>
);
};

export default Routes;

如果需要，很乐意提供额外的代码，谢谢！

预计到达时间：澄清问题 - 单击按钮时，不会调度操作，甚至不会将值传递给操作。我希望按钮上的选择值成为 routeSelected 状态值，然后使用 routeSelected 值进行 api 调用。就此问题而言，仅派发操作将很有帮助！

Answer 1

写完最后一条评论后，我实际上可能会看到几个潜在的问题：

首先，您目前正在定义两个 不同的 操作类型，名称为 routeSelected:

一个在routes slice中，由键routeSelected
另一个在 createActionRoutes.js 中，由对 createAction("routeSelection") 的调用生成。

您正在将第二个导入到组件中并进行调度。但是，这是一个与切片中的名称不同的操作类型字符串名称 - 它只是 'routeSelection'，而切片文件中的名称是 'routes/routeSelected'。因此，slice 文件中的 reducer 逻辑永远不会运行响应该操作。

我认为您根本不想进行单独的 createAction() 调用。在切片文件中执行 export const { routeSelected } = slice.actions，并在组件中分派该操作。

我也有点担心你那里的 loadroutes 砰砰声。我看到你可能从中间省略了一些代码，所以我不知道它在做什么，但它看起来不像是在检索获取的数据时实际调度操作。

我建议研究使用 RTK 的 createAsyncThunk API 来生成和调度动作作为数据获取的一部分 - 有关示例，请参阅 Redux Essentials, Part 5: Async Logic and Data Fetching。

使用钩子和 redux 工具包的 React-redux 调度操作 onclick

React-redux dispatch action onclick using hooks and redux toolkit

onclick

redux

react-redux

react-hooks

redux-toolkit