Redux 如何访问状态

Posted 2023-03-16

【中文标题】Redux 如何访问状态

【英文标题】：Redux how to access state

【发布时间】：2021-08-09 05:11:44

【问题描述】：

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

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

【参考方案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,
);