通过 react-redux 调度组件

Question

我想通过 redux 传递一个组件并将其显示在另一个组件中。 我正在做这样的事情：

ComponentToDispatch.js

const ComponentToDispatch = (props) => {
    return (<div>Propagate me {props.anthem}</div> {/* props.anthem = undefined, unlike what I expect.*/}
);
};
export {ComponentToDispatch};

在下面的组件中，我有一个按钮可以调度以前定义的按钮。

BruitEvent.js

 // code above
`import {ComponentToDispatch} from "./ComponentToDispatch";
 import {showComponentAction} from "./actions";
 const BruitEvent =()=>{
    const dispatch = useDispatch();
    return (<button onClick={(evt)=>dispatch(showComponentAction(ComponentToDispatch)}>
 Click to dispatch</button>);
 };`

The action that triggers this event is: actions.js

 `
 export function ShowComponentAction(Component) {

 return {
    type: SHOW_ACTION,
    payload: {
      component: <Component />,
  },
 };
}`

Finally, I can display the propagated component:

const DispayComponent = () =>{
const { component} = useSelector((state) => {
if (state.testDisplay) {
  return {
    component: state.testDisplay.component,
  };
}
   return { component: null };
 });

useInjectReducer({ key: "testDisplay", reducer });

   return (<div>{component}</div>);
 }
 export {DisplayComponent};

到目前为止一切顺利，感谢 David Hellsing for his insight，我可以显示 `ComponentToDispatch' 中的所有静态内容，但它无法处理道具。

问题：如何在派发组件本身的同时传输道具？

Answer 1

您需要在派发组件之前实例化并包含道具，或者将未实例化的组件和道具对象传递到调度动作并将道具传递给接收端的组件。我建议后者，同时发送组件和道具。

const BruitEvent =()=>{
  const dispatch = useDispatch();
  return (
    <button
      onClick={(evt) => dispatch(
        showComponentAction(ComponentToDispatch, /* some possible props object */)
      )}
    >
      Click to dispatch
    </button>
  );
};

...

export function ShowComponentAction(Component, props = {}) {
  return {
    type: SHOW_ACTION,
    payload: { Component, props }, // <-- assumes reducer places in state.testDisplay
  },
};

...

const DispayComponent = () =>{
  const { Component, prop } = useSelector((state) => state.testDisplay);

  useInjectReducer({ key: "testDisplay", reducer });

  return Component ? <div><Component {...props} /></div> : null;
}