Javascript react redux：操作不会更改存储

我正在用redux构建一个react应用程序，我遇到了一个问题

我有一个组件连接到redux存储，即使我发送了操作，这些操作也不会从reducer收到，因此状态不会改变

以下是组件的代码：

import React from "react";
import { connect } from "react-redux";

import { setOrderFilter } from "store/filters";

const mapStateToProps = (state) => {
    return {
        filters: state.entities.filters,
    };
};

const mapDispatchToProps = {
    setOrderFilter,
};

function Filters(props) {
    const { order } = props.filters;

    console.log(setOrderFilter({test: 1}) 
    // {type: "filters/setOrderFilter", payload: {…}}
    // payload: {test: 1}
    // type: "filters/setOrderFilter"

    const handleOrder = (event) => {
        setOrderFilter({ order: event.target.value });
    };

    return (
        <div>
            <label>
                Date order:
                <select value={order} onChange={(e) => handleOrder(e)}>
                    <option value="ascending">ascending</option>
                    <option value="descending">descending</option>
                </select>
            </label>
        </div>
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(Filters);

一切看起来都很好，即使是

console.log

操作

setOrderFilter

也会产生正确的结果，但是当我在UI中更改select时，不会调度任何操作，值也不会更改。。。 减速器内的

console.log

从未打印

存储区配置了api中间件来处理异步代码：

import axios from "axios";
import * as actions from "store/api";

import getBaseUrl from "helpers/getApiUrl";

const api = ({ dispatch }) => (next) => async (action) => {
    console.log(action)
    if (action.type !== actions.apiCallBegan.type) return next(action);

    ....
};

export default api;

来自其他实体的调用在中间件中打印并可见，来自

过滤器的调用甚至没有打印在中间件中

我遗漏了什么？
我想是变量名。试试这个：

state.order = action.order;

如果您使用的是redux工具包，那么可以直接使用钩子

这里似乎您正在
调用
操作，
这还不够
，但您还需要
调度操作
。在您的情况下，它甚至没有到达减速器，因为您没有调度它，这就是问题所在

试试这个，它会解决你的问题

import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setOrderFilter } from "store/filters";

function Filters(props) {
    const dispatch = useDispatch();

    const handleOrder = useCallback ((event) => {
        // you actually need to dispatch action not just call it
        dispatch(setOrderFilter({ order: event.target.value }));
    }, []);

    // ... other code


我希望这将解决您的问题问题在于handleOrder函数

const handleOrder = (event) => {
    setOrderFilter({ order: event.target.value });
};

您必须使用已连接的
setOrderFilter
。这在组件的道具中

const handleOrder = (event) => {
    props.setOrderFilter({ order: event.target.value });
};

使用mapDispatchToProps速记时很容易出错。作用域中有一个名为
setOrderFilter
的函数，但当您使用该函数时，您将只创建action对象，但它不会被分派到redux。
我不确定该在何处添加该行，在filters.js中定义reducer@asma操作有两种类型，即
类型和
有效负载，因此您只能以
有效负载的形式访问传递的数据，因此这是正确的代码，请尝试而不是console.log（“此处”）、console.log（操作），并查看其响应方式
const handleOrder = (event) => {
    props.setOrderFilter({ order: event.target.value });
};