Redux 如何访问状态答案

【问题标题】：Redux how to access stateRedux 如何访问状态
【发布时间】：2023-03-23 14:47:01
【问题描述】：

我在访问其中一个组件的状态时遇到问题。我有一个组件，用户在其中添加名称和权重，然后提交。然后将它们重定向到主页。我想要发生的是输入的名称显示在主页上。我可以看到状态更新，但我不知道如何访问状态并将名称显示在主页上。任何帮助，将不胜感激。这是我的主页组件：

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;

这是显示状态的屏幕截图（注意：我添加了多个名称和权重，我最终希望每个“名称”都出现在主页上）：

【问题讨论】：

你的“移动”状态是一个数组。所以当你访问它时，你必须使用这样的东西：state.move[0].name

标签： reactjs redux react-redux react-hooks reducers

【解决方案1】：

您的move 状态分支是一个数组。您无法通过state.move.name 访问该名称。取而代之的是，您可以从 redux 存储中获取一系列动作并使用 Array.map() 方法渲染它们。

const MovementButtons = ({ movements }) => {
    return (
        <div>
            {
                movements.map(({ name, weight }) => {
                    if (name) {
                        <Button
                            className={classes.movementButtons}
                            onClick={() => history.push('/movement/:id')}
                            key={name}
                        >
                            <div className={classes.movementName}>{name}</div>
                        </Button>
                    }

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

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

    return (
        <div className={classes.homePageContent} >
            <Header title={"Home Page" }/>
            <MovementButtons movements={movements} />
            <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,
);

【讨论】：