Question

好友组中与 Adam 联系的示例redux树：

{
    groups: {
        1: {
            name: "Friends"
            contacts: [1]
        }
    }
    contacts: {
        1: {
            name: "Adam"
        }
    }
}

现在我想在 Friends 组中创建一个新联系人，结果如下：

{
    groups: {
        1: {
            name: "Friends"
            contacts: [1, 2]
        }
    }
    contacts: {
        1: {
            name: "Adam"
        },
        2: {
            name: "Bethany"
        }
    }
}

目前我在两个reducer上运行redux操作之前创建了新的联系人ID。然而，这感觉非常混乱，有没有更好的方法去做这个？我目前的代码如下：

contact.js

import { connect } from 'react-redux';

function Contact({ createContact, groupId, newContactId }) {
    function onContactCreate(name) {
        createContact(newContactId, groupId, name);
    }
    // ...
}

const mapStateToProps = (state) => {
    return {
        newContactId: state.get('contacts').size + 1
    };
};

export function mapDispatchToProps(dispatch) {
    return {
        createContact: (newContactId, groupId, name) => dispatch({
            type: 'CREATE_CONTACT',
            newContactId,
            groupId,
            name
        })
    };
}

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

与-reducer.js

import { fromJS } from 'immutable';

const initialState = fromJS({});

function contactReducer(state = initialState, action) {
    switch (action.type) {
        case 'CREATE_CONTACT': {
            return state
                .set(action.id, fromJS({
                    name: action.name
                }));
        }
        default:
            return state;
    }
}

export default contactReducer;

基reducer.js

import { fromJS } from 'immutable';

const initialState = fromJS({});

function groupReducer(state = initialState, action) {
    switch (action.type) {
        case 'CREATE_CONTACT': {
            let id = action.groupId;
            return state
                .updateIn([id, 'contacts'], (contacts) => contacts.push(action.id));
        }
        default:
            return state;
    }
}

export default groupReducer;

Answer 1

在发送操作之前，您确实必须创建ID。 ID不应该取决于当前状态。如果您使用时间旅行或Redux Dev工具编辑历史记录，则相同的操作可能会创建具有不同ID的项目。这会导致后续操作使用不正确的ID。

通常，对象的标识应绑定到对象，而不是单独创建。

Redux：在第一个reducer中添加值，然后将新创建的值传递给第二个reducer

1 个答案: