React Redux如何保存状态

我在计算如何在我的应用程序中保存状态时遇到了一些问题。我有一个组件，用户在其中添加“名称”和“权重”。当用户单击submit按钮时，它会将他们重定向到主页，并显示新添加的名称（权重将显示在其他位置）。 我遇到的问题是，当我返回并添加另一个“名称”和“重量”时，以前的名称将消失并替换为新名称。我希望在添加新名称时，将以前的“名称”保留在主页上

这是我的AddPage组件：

const AddPage = () => {
    const [name, setName] = useState('');
    const [weight, setWeight] = useState(0);
    const classes = useStyles();
    const dispatch = useDispatch();

    return (
        <div>
            <Header title="Add Page" />
            <div className={classes.addPage}>
                <div className={classes.addMovementDiv}>
                    <TextField 
                        className={classes.movementName} 
                        key="name" 
                        label="Enter Movement Name" 
                        InputProps= {{className: "textBoxColor"}}
                        variant="outlined"
                        onChange={event => {
                            const { value } = event.target;
                            setName(value);
                        }}
                         
                        
                         />    
                    <TextField 
                        className={classes.movementWeight} 
                        key="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={() => dispatch(addMovement(name, weight))}
                        >
                        <AddCircleIcon />
                    </Button>
                </div>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        name: state.move.name,
        weight: state.move.weight,   
    }   
};

const mapDispatchToProps = (dispatch) => {
    return({
        addMovement: (name, weight) => dispatch(addMovement(name, weight)),
    })
};

const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
);

export default compose(withConnect)(AddPage);

const HomePage = () => {
    const classes = useStyles();
    const name  = useSelector(state => state.move.name);

    const displayMovementButtons = () => {
        if (name) {
            return (
                <Button 
                    className={classes.movementButtons}
                    onClick={() => history.push('/movement/:id')}
                >   
                <div className={classes.movementName} >{name}</div>
                </Button>
            )
        } 

        return <div className={classes.noMovementsMessage} >Click add button to begin</div>
    }

    return (
        <div className={classes.homePageContent} >
            <Header title={"Home Page" }/>
            <div>{displayMovementButtons()}</div>
            <div className={classes.fabDiv}>
                <Fab 
                    className={classes.fab}
                    onClick={() => history.push(`/add`)}>  
                    <AddIcon />      
                </Fab>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        name: state.move.name,  
    }   
};

const withConnect = connect(
    mapStateToProps,
);

export default compose(withConnect)(HomePage);

以下是我的店铺的设置位置：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(reduxThunk))
);

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>,
    document.querySelector('#root')
);

const composeEnhancers=window.uuux_vtools_vtools_vtools_vtools_vtuextension_vtucompose| COMPOSE；
const store=createStore(
减根剂，
复合容器（applyMiddleware（reduxThunk））
);
ReactDOM.render(
,
document.querySelector（“#root”）
);

---

任何帮助都将不胜感激

您将redux state与hook一起使用，这是在误用它。这是一种非此即彼的情况

---

我可以看看你们的商店和减速机吗？

谢谢你们的回复！我已经更新了问题，包括我的减速机和存储。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(reduxThunk))
);

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>,
    document.querySelector('#root')
);