Как я могу группироваться в коде React / Redux (впервые в интерфейсе)?

Question

У меня проблемы с запуском этой функции в моем коде React / Redux. Я новичок в React (в основном работаю над бэкэндом), поэтому не уверен, почему он не работает должным образом. Это в нужном месте? У меня также возникают проблемы с поиском того, где console.log печатается в консоли, поскольку консоль настроена с предыдущим действием, действием, шаблонами следующего состояния ....

Эта функция определена в моих действиях . js '(где он также вызывается позже):

const groupBy = (array, key) => {
    return array.reduce((result, currentValue) => {(
     result[currentValue[key]] = result[currentValue[key]] || []).push(
        currentValue
      );
      return result;
    }, {}); 
  };

Здесь вызывается функция (тот же файл):

export function getAlerts() {
    return dispatch => {
        api.get('notifications', (response) => {
            const grouped = groupBy(response.results.data, 'email');
            dispatch(updateFetchedAlerts(grouped));
        }, (error) => {
            console.warn(error);
        })
    }
}

Вход, ответ. results.data, выглядит примерно так:

[{"email": test@email.com, "is_active": true, "alert_id": 1, "pk": 1}, 
{"email": test@email.com, "is_active": true, "alert_id": 2, "pk": 2}, 
{"email": different@email.com, "is_active": true, "alert_id": 1, "pk": 3}]

Я хочу, чтобы он выглядел так:

[{"test@email.com": [{"is_active": true, "alert_id": 1, "pk": 1}, 
                    {"is_active": true, "alert_id": 2, "pk": 2}],
"different@email.com": [{"is_active": true, "alert_id": 1, "pk": 3}]}]

но похоже, что эта функция не работает, я повторно запустил пряжу построить и использовать инкогнито ...

ОБНОВЛЕНИЕ: эта функция действительно РАБОТАЕТ! Спасибо всем. Инструменты разработчика redux очень полезны. Вторая проблема в том, что мне нужно добавить свои собственные ключи .... В идеале результат должен выглядеть так. Желательно без лоды sh!:

[{"email": "test@email.com",
"alerts": [{"is_active": true, "alert_id": 1, "pk": 1}, 
           {"is_active": true, "alert_id": 2, "pk": 2}]},
{"email": "different@email.com",
"alerts": [{"is_active": true, "alert_id": 1, "pk": 3}]}]

Answer 1

Вы можете использовать ту же функцию, которую вы использовали для группировки, которая дает объект формы

{ [string]: object[] }

Использование Object.entries позволяет вам преобразовать это в массив пар ключ-значение, который вы можете сопоставить массив объектов с формой

{
  email: string,
  alerts: object[],
}

Обновления функций

const groupBy = (array, key) =>
  array.reduce((result, { [key]: k, ...rest }) => {
    (result[k] = result[k] || []).push(rest);
    return result;
  }, {});

const groupDataBy = (array, key) =>
  Object.entries(groupBy(array, key)).map(([email, alerts]) => ({
    email,
    alerts
  }));

Обратный вызов функции карты ([email, alerts]) => ({ email, alerts }) использует деструктуризацию массива для присвоения массива [key, value] именованным переменным email и alerts, и сокращенная запись объекта для создания объекта с ключами, названными для переменных.

const data = [{
    "email": "test@email.com",
    "is_active": true,
    "alert_id": 1,
    "pk": 1
  },
  {
    "email": "test@email.com",
    "is_active": true,
    "alert_id": 2,
    "pk": 2
  },
  {
    "email": "different@email.com",
    "is_active": true,
    "alert_id": 1,
    "pk": 3
  }
];

const groupBy = (array, key) =>
  array.reduce((result, { [key]: k, ...rest }) => {
    (result[k] = result[k] || []).push(rest);
    return result;
  }, {});

const groupDataBy = (array, key) =>
  Object.entries(groupBy(array, key)).map(([email, alerts]) => ({
    email,
    alerts
  }));

const res = groupDataBy(data, 'email');

console.log(res)

Answer 2

Хорошо, сначала консоль находится в Browser Developer Tools seccion console. Там вы можете просмотреть весь console.log. В Chrome вы можете открыть его, нажав F12.

И другой вопрос, функция, которая вам нужна:

//Function groupBy.
function groupBy(array, key) {
  let arrayReduced = array.reduce(
    (result, { [key]: k, ...rest }) => {
      (result[k] = result[k] || []).push(rest);
      return result;
    },
    {}
  );
  return arrayReduced;
}

//Your example data.
const group = [
  {
    email: 'test@email.com',
    is_active: true,
    alert_id: 1,
    pk: 1,
  },
  {
    email: 'test@email.com',
    is_active: true,
    alert_id: 2,
    pk: 2,
  },
  {
    email: 'different@email.com',
    is_active: true,
    alert_id: 1,
    pk: 3,
  },
];

//Function  executed
const result = groupBy(group, 'email');

//Result
console.log(result);

Надеюсь, поможет!