React redux -将参数传递给url - error - Actions必须是纯对象

在使用React Redux时，如果你遇到“Actions必须是纯对象”的错误，这通常是因为你在创建action时没有遵循Redux的规范。在Redux中，actions是描述发生了什么的对象，它们必须满足以下条件：

1. 纯函数：action创建函数（通常称为action creators）应该是一个纯函数，这意味着相同的输入总是产生相同的输出，而且它不应该有任何副作用，比如修改传入的参数或执行异步操作。
2. 纯对象：action本身应该是一个普通的JavaScript对象，它必须有一个type属性，通常还会包含其他描述事件的属性。

如果你尝试直接传递参数给URL并遇到了这个错误，可能是因为你在action creator中做了不恰当的操作。下面是一个正确的action创建函数的例子：

// 正确的action creator示例
function addItem(item) {
  return {
    type: 'ADD_ITEM',
    payload: item
  };
}

如果你需要将参数传递给URL，通常是在组件中使用react-router来处理路由跳转。这里有一个如何结合Redux和react-router来导航到新URL的例子：

import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const dispatch = useDispatch();
  const history = useHistory();

  const handleClick = () => {
    // 假设我们要添加一个item并导航到新页面
    const newItem = { id: 1, name: 'New Item' };
    dispatch(addItem(newItem));
    history.push(`/items/${newItem.id}`);
  };

  return (
    <button onClick={handleClick}>Add Item and Navigate</button>
  );
}

在这个例子中，handleClick函数首先分发一个action来更新Redux store，然后使用history.push方法来改变URL并导航到新页面。

如果你遇到的问题是在尝试将参数嵌入到action对象中时发生的，确保你没有在action creator中执行任何非纯的操作，比如调用API或修改全局状态。

参考链接：

• Redux Actions
• React Router DOM

如果你遵循了上述建议但仍然遇到问题，请确保你的Redux中间件配置正确，特别是如果你使用了像redux-thunk或redux-saga这样的中间件来处理异步操作。