React-Redux 如何保存状态答案

【问题标题】：React-Redux how to save stateReact-Redux 如何保存状态
【发布时间】：2021-05-18 22:51:57
【问题描述】：

我在弄清楚如何在我的应用中保存状态时遇到了一些麻烦。我有一个组件，用户在其中添加“名称”和“重量”。当用户点击提交按钮时，它会将他们重定向到主页并显示新添加的名称（重量将显示在其他地方）。我遇到的问题是，当我返回并添加另一个“名称”和“重量”时，以前的名称会消失并被新名称替换。我希望在添加新名称时让以前的“NAME”留在主页上。

这是我的 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 initialState = []

const addMovementReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_MOVEMENT: 
            return [ ...state, {name: action.name, weight: action.weight} ]
        default:
            return state;
    }
};

export default addMovementReducer;

这里是我的商店设立的地方：

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')
);

任何帮助将不胜感激！

【问题讨论】：

标签： redux react-redux state

【解决方案1】：

您通过将它与钩子一起使用来滥用 redux 状态。这是一个非此即彼的情况

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

【讨论】：

感谢您的回复！我已更新问题以包括我的减速器和商店。