React-Redux如何保存状态

Question

我在弄清楚如何在我的应用程序中保存状态时遇到了一些问题。我有一个组件，用户在其中添加一个'NAME‘和一个'WEIGHT’。当用户单击submit按钮时，它会将用户重定向到主页，并显示新添加的名称(权重将显示在其他位置)。我遇到的问题是，当我返回并添加另一个“name”和“WEIGHT”时，以前的名称消失了，取而代之的是新的名称。我想要发生的是当我添加一个新的名字时，以前的‘名字’留在主页上。

下面是我的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);

下面是我的HomePage组件：

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

这是我的reducer：

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

任何帮助都将不胜感激！

Answer 1

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

我可以看看你的存贮器和减速机吗？