javascript - 如何在我的组件中触发我的 redux 函数

Question

我有一个表单应该在提交时创建一个新用户。在 handleCreate 上，我需要 redux 来触发 addUser 操作并更新状态，从而创建一个新用户，但我似乎没有正确调用该操作。

Action .js

 const addUser = payload => ({
    payload,
    type: ADD_USER,
});

reducer.js

const addUsers = (items, newItem) => {
    const { id } = newItem;
    items[id] = newItem;
    return { ...items };
};

       case ADD_USER: {
            const { users } = state;
            const { payload: { item } } = action;
            return {
                ...state,
                isUpdated: true,
                users: addUsers(users, item),
            };
        }

组件中触发 Action 的函数

    handleCreate = () => {
        const { form } = this.formRef.props;
        const { addUser } = this.props.actions;
        form.validateFields((error, values) => {
            if (error) {
                return error;
            }
            form.resetFields();
            const user = {
                age: values.age,
                birthday: values[DATE_PICKER].format('YYYY-MM-DD'),
                firstName: values.firstName,
                hobby: values.hobby,
                id: uuid(),
                lastName: values.lastName,
            };
            addUser(user);
        });
    };

Answer 1

你遇到的问题是解构播放负载，const { payload: { item } } = action; 期望 payload 有一个键 item

const action = {
  payload: {
    item: {
      a: "a",
      b: "b"
    }
  }
};

const {
  payload: { item }
} = action;

console.log(item)

将 reducer 中的 const { payload: { item } } = action; 替换为

const { payload: item } = action;