不确定如何正确更新 Redux 中的状态

Posted 2023-02-22

【中文标题】不确定如何正确更新 Redux 中的状态

【英文标题】：Not sure how to update State in Redux properly

【发布时间】：2018-04-03 05:31:06

【问题描述】：

我不确定如何在redux 中正确更新state。我得到重复的条目。

state 是这样的

const STATE = 
    windowOne:  ... 
    windwoTwo:  ... 
    windowThree:  ... 

这是我的减速机之一

export default function reducer(state = STATE, action) 
    switch (action.type) 
        case type.WINDOW_ONE: 
            return 
                ...state,
                windowOne: 
                    ...state.windowOne,
                    foo: action.bar,
                
            
        
    

我将状态映射到我的组件的道具

function mapDispatchToProps(dispatch) 
    return bindActionCreators(combinedActions, dispatch);


const mapStateToProps = state => 
    const  windowOne  = state.windowOne;

    return 
        windowOne,
    ;


export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);

我在这里结合了各种减速器

export default combineReducers(
    windowOne,
    windowTwo,
    windowThree
);

当我使用redux-logger 时，我看到在windowOne 中复制了整个state。在那里，触发action 后，我找到windowTwo 和windowThree。我也不确定为什么我必须在这些行中指定windowOne

    const  windowOne  = state.windowOne;

const windowOne = state 还不够吗？这可能是相关的......

【参考方案1】：

检查docs 是否为combineReducers；它负责向每个 reducer 发送适当的状态切片并合并结果。对于所示的 reducer，这意味着您应该只将 windowOne 的初始状态传递给它，并只返回 windowOne 的更新状态：

export default function reducer(state = STATE.windowOne, action) 
    switch (action.type) 
        case type.WINDOW_ONE: 
            return 
                ...state,
                foo: action.bar,
            
        
    

在此之后，mapStateToProps 中的 const windowOne = state 应该可以工作。另请注意，每个reducer 都需要一个默认情况，因为所有reducer 都会接收所有操作，并且STATE 可能更适合命名为initialState。

【讨论】：

嗯，我以前也是这样。但是我把它改成了我写的代码，因为我需要在windowOne、windowTwo和windowThree之间交换数据。我以为我通过了我的reducer 整个STATE 然后只返回windowOne 部分。这更新了state，并且新创建的数据可以在另一个reducer 中访问，我也通过STATE。用STATE.windowOne，不过，我应该能够访问更新的数据？！

如果使用combineReducers，传入并返回整个状态将在每个***状态属性中创建一个嵌套副本。您可能想要使用单个减速器或使用像 reduce-reducers 这样的包，如 Beyond combineReducers 中所述。