通过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};

 // 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>);
 };`

 `
 export function ShowComponentAction(Component) {

 return {
    type: SHOW_ACTION,
    payload: {
      component: <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};

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;
}