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

Question

Friends 组中联系人 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"
        }
    }
}

目前我正在创建新的联系人 ID，然后运行在两个 reducer 上执行 redux 操作。然而，这感觉真的很乱，有没有更好的方法来做这件事？我当前的代码如下：

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 开发工具来编辑历史记录，则相同的操作可能会创建具有不同 ID 的项目。这将导致后续操作使用不正确的 ID。

一般来说，一个对象的标识应该是绑定到对象上的，而不是单独创建的。

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

Redux: Add value in first reducer and then pass the newly created value to second reducer

reactjs

redux

react-redux