有没有办法通过道具传递动作？ 使用 react-redux 制作可重复使用的组件

Question

I would like to make a component that loads actions and states dynamically so that I can reuse it in other parts of the code.

I'm trying this way but the action is firing before sending to component:

function ClientsHeader(props) {
    const action = Actions.searchClients();
    return (
        <SearchHeader data={data} campoPesquisa={campoPesquisa} action={action}/>
    );
}    
export default ClientsHeader;

On children:

function SearchHeader(props) {
  const dispatch = useDispatch();
  const action = props.action;

  return;
  <div className="flex flex-1 w-full items-center justify-between">
    <Input
      placeholder="Search"
      onChange={event => dispatch(action(event))}
    />
  </div>;
}

There is a way to call a function name with variables? Because that would solve this.

Please don't be rude to my stupidity, I'm new to this:D

Answer 1

The error is from the line const action = Actions.searchClients();

This actually calls the function searchClients .

It should rather be const action = () => Actions.searchClients();

Answer 2

It's because you are calling Actions.searchClients in ClientsHeader component, you just need to pass the reference as

const action = Actions.searchClients;

Note: I think you should import the action in the component directly,

Hope it helps