Redux Reducer:这是从初始状态切换布尔值的可接受方法吗?

问题描述 投票:0回答:1

我有一个对象数组作为初始状态。该数组保存用户问题/响应数据。在HTML页面上,有一个Material-ui切换开关,用于控制问题是公开的还是私有的。我知道redux建议在操作中保持逻辑而不是化简,但这是我想出的解决方案。 “ toggleSwitch减速器”是可以接受的解决方案,还是我创建了反模式?

注意我使用的是'reducer helper'而不是'switch statement'来减少样板代码。先感谢您。我对redux非常陌生。

// ACTION
export const toggleQuestion = (questionId) => {
    return {
        type: TOGGLE_QUESTION,
        payload: {
            questionId
        }
    }
}




//REDUCER 
const initialState = [{
        id: '1',
        firstName: 'James',
        lastName: 'Smith',
        question: 'Ask a question here?',
        response: 'This is an answer to the question',
        public: true,
        created: '2019-23-11T01:50:00+00:00',
        modified: null
    },
    {
        id: '2',
        firstName: 'Taylor',
        lastName: 'Johnson',
        question: 'Ask another question here?',
        response: 'Here is another answer to another question',
        public: true,
        created: '2019-23-11T01:50:00+00:00',
        modified: null
    }
];


const toggleSwitch = (state, payload) => {
    return [
        ...state.map((item) => {
            if (item.id === payload.questionId) {
                return Object.assign(item, {
                    public: !item.public
                })
            }
            return item
        })
    ]
}

export default createReducer(initialState, {
    [CREATE_QUESTION]: createQuestion,
    [UPDATE_QUESTION]: updateQuestion,
    [DELETE_QUESTION]: deleteQuestion,
    [TOGGLE_QUESTION]: toggleQuestion
});




// HELPER TO CREATE THE REDUCER
export const createReducer = (initialState, fnMap) => {
    return (state = initialState, {
        type,
        payload
    }) => {
        const handler = fnMap[type];

        return handler ? handler(state, payload) : state
    }

}
reactjs redux react-redux reducers
1个回答
0
投票

简单的答案是如果您连续十次执行相同的操作,是否会得到相同的结果?

减速器应该是纯净的,没有任何副作用,意味着每次都相同的输入,产生相同的输出。

根据您的示例,在我看来,这是相同的操作,针对相同的状态应该产生相同的输出,所以我想是的,对此我没有看到任何问题。

但是,您可以提取该逻辑以达到仅指示状态作为更新的一部分的作用,即新值应该是什么。

尚不清楚您使用的是什么框架,但是React具有Saga和Thunks,而Angular具有NgRX,它为您提供了一个“安全”的位置来在reducer之外施加副作用。

我经常使用normalizr创建数据模式,就像数据库一样。然后,我使用selectors从商店进行很多繁重的工作。这使我可以简化我的减速器,并且只真正关心它们处理的道具的更改。

© www.soinside.com 2019 - 2024. All rights reserved.