Reactjs React Redux如何将状态从一个容器传递到另一个容器

我在将状态从一个容器传递到另一个容器时遇到了一些问题。我有一个容器“添加页面”，用户在其中创建一个带有“名称”和“重量”的对象。我希望发生的是，在“主页”容器中可以访问“名称”和“重量”

以下是我的“添加页面”容器的代码：

function AddPage(props) {
    const {
        dispatchPostMovement,
    } = props;
    const classes = useStyles();
    const [name, setName] = useState('');
    const [weight, setWeight] = useState('');
    useInjectReducer({ key: KEY, reducer });
    useInjectSaga({ key: KEY, saga });
    useEffect(() => {
        dispatchPostMovement(INITIAL_PAGE, null);
        // eslint-disable-next-line
    }, []);
    useEffect(() => {
        document.title = props.title || "Add Page";
    }, [props.title]);
    const AddMovement = () => {
        const movement = {name, weight};
        
        dispatchPostMovement(movement);
    };
    
    return (
        <div>
            <HeaderButton 
                onClick={() => history.push(`/`)}
                title="Add Movement"/>
            <div className={classes.addPage}>
                <div className={classes.addMovementDiv}>
                    <TextField 
                        className={classes.movementName} 
                        id="name" 
                        label="Enter Movement Name" 
                        InputProps= {{className: "textBoxColor"}}
                        variant="outlined" 
                        onChange={event => {
                            const { value } = event.target;
                            setName(value);
                        }}/>    
                    <TextField 
                        className={classes.movementWeight} 
                        id="weight" 
                        label="Enter Movement Weight" 
                        type="number" 
                        variant="outlined"
                        onChange={event => {
                            const { value } = event.target;
                            setWeight(value);
                        }} 
                        InputProps= {{endAdornment: <InputAdornment position="end">lb</InputAdornment>, className: "textBoxColor"}} />
                    <Button 
                        className={classes.addButton}
                        variant="outlined"
                        onClick= { () => AddMovement() }>
                        <AddCircleIcon />
                    </Button>
                </div>
            </div>
        </div>
    )
};

AddPage.propTypes = {
    loading: PropTypes.bool,
    dispatchPostMovement: PropTypes.func,
};

const mapStateToProps = createStructuredSelector({
    movement: makeSelectMovement(),
});

function mapDispatchToProps(dispatch) {
    return {
        dispatchPostMovement: (movement) => {
            dispatch(postMovement(movement));
        },
    };
};

const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
);

export default compose(withConnect)(AddPage);

function HomePage(props) {
    const {
        movements,
        dispatchLoadMovements,
    } = props;
    const classes = useStyles();
    const newMovements = movements && movements.map((movement) => 
        <Button 
            key={movement.id}
            className={classes.headerButton}
            onClick={() => history.push(`/movement/${movement.id}`)}>
            {movement.name}
        </Button>
    );

    useInjectReducer({ key: KEY, reducer });
    useInjectSaga({ key: KEY, saga });

    useEffect(() => {
        dispatchLoadMovements(INITIAL_PAGE, null);
        // eslint-disable-next-line
      }, []);

    useEffect(() => {
        document.title = props.title || "Home Page";
    }, [props.title]);

    return (
        <div>
            <HeaderButton title="App Name" className={classes.Header}/>
            <div className={classes.Buttons}>
                <span>{newMovements}</span>
            </div>
            <div className={classes.fabDiv}>
                <Fab 
                    className={classes.fab}
                    onClick={() => history.push(`/add`)}>  
                    <AddIcon />      
                </Fab>
            </div>
        </div> 
    );
};

const mapStateToProps = createStructuredSelector({
    loading: makeSelectLoading(),
    page: makeSelectPage(),
    movements: makeSelectMovements(),
});

HomePage.propTypes = {
    loading: PropTypes.bool,
    movements: PropTypes.array,
    dispatchLoadMovements: PropTypes.func,
};

function mapDispatchToProps(dispatch) {
    return {
        dispatchLoadMovements: () => {
            dispatch(getMovements("GET"));
        },
    };
};

const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
);

export default compose(withConnect)(HomePage);

功能添加页面（道具）{
常数{
派遣后移动，
}=道具；
const classes=useStyles（）；
const[name，setName]=useState（“”）；
常数[重量，设定重量]=使用状态（“”）；
useInjectReducer（{key:key，reducer}）；
useInjectSaga（{key:key，saga}）；
useffect（（）=>{
dispatchPostMovement（初始页面，空）；
//eslint禁用下一行
}, []);
useffect（（）=>{
document.title=props.title | |“添加页面”；
}，[道具名称]；
常量AddMovement=（）=>{
常量移动={name，weight}；
调度后移动（移动）；
};
返回(
history.push（`/`）}
title=“添加移动”/>
{
const{value}=event.target；
设置名称（值）；
}}/>    
{
const{value}=event.target；
设定重量（值）；
}} 
InputProps={{endAdorment:lb，类名：“textBoxColor”}/>
AddMovement（）}>
以下是主页截图，其中包含我将使用state创建的内容示例：
如果有人能帮我，那太棒了