Максим

https://cloudcannon.com/deconstructions/2014/11/15...

Смысл в том что рисуется такая заглушка, а потом ее заменяет контент при загрузке

добавьте в скрипт запуска сервера ключи host и port:

"scripts": {
  "dev": "webpack-dev-server --inline --content-base dev-build/ --host xxx.xxx.xxx.xxx --port xxxx --open"
}

Давайте поставим вопрос иначе, почему вы решили, что перезагрузка страницы не должна обнулять стор?

Нет. В первом случае вы возвращаете из AC функцию c аргументом dispatch.
Во втором случае вы не возвращаете ничего и убрали аргумент dispatch, заменив названием.
А сама функция dispatch, которая передается в аргумент, как раз синхронная.

Добавьте return и будет аналогично первому варианту:

export const addComponent = data => {
  return async function(dispatch) {     //  тут добавлен return и аргумент
    let comps = await fire.database().ref("components");
    comps.push({
      name: data.component,
      comp: data.component_name
    });

     //так же в любое время вы можете вызвать dispatch
     dispatch({ type: 'someAction', payload: 'someValue' });
  };
}

Еще пример:
const foo = x => y => x + y;
аналогично:

const foo = x => {
  return  y => {
    return x + y;
  }
};

Как это работает:

const foo = x => y => x + y;

const a = x(5);
const b = a(6);

console.log(b);
// => 11

Значение а можно представить так:
y => 5 + y;

Функция у вас асинхронная и пока не зарезолвится comps ее выполнение не продолжится, так как перед вызовом возвращающим значение comps стоит ключевое слово await.

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref("components");
  // функция продолжит выполнение только когда вернется значение присвамваемое comps
  comps.push({
    name: data.component,
    comp: data.component_name
  });
};

Как я понимаю у вас возникли проблемы при работе с firebase?
Могу порекомендовать использовать готовую библиотеку, вроде https://github.com/prescottprue/react-redux-firebase
или разобраться с отличной библиотекой redux-saga и написать с помощью нее удобную реализацию взаимодействия с firebase.

state в react нельзя менять напрямую, надо использовать асинхронный метод setState.

createCheckboxes = () => {
  const data = this.props.pets[0] || {};
  const newAnimals = Object.values(data).map(el => el.animal);
 
  this.setState(({ animals }) => ({
    animals: [ ...animals, ...newAnimals ],
  }));
};

Ошибка из-за того, что вы используете к колбеке map не стрелочную функцию, а обычную и в ее контексте this в strict режиме ссылается на undefined. Со стрелочной функцией такой ошибки бы не было.

PS. Я вам советовал писать в state состояния фильтра и фильтровать массив при рендере. А вы все делаете наоборот. Неправильно используете библиотеку и функции массива. Вам надо документацию по react хорошо изучить и основы js подтянуть. Особенно возможности ES6 и экспериментальных фич используемых в react разработке.

Советую перед тем как будете отправлять работодателю свое тестовое задание, сбросить его сюда попинать.

Идеальный вариант, создать для этих задач компонент:

function Block({ 
  children,
  isLoading, 
  isError, 
  isEmpty, 
  emptyText, 
  fetch,
}) {
  const showPreloader = isLoading && !isError;
  const allDataIsReady = !isLoading && !isError;
  const showEmptyText = allDataIsReady && isEmpty && emptyText;

  return (
    <Wrapper>
      {showPreloader && <Preloader />}
      {isError && <TryAgain fetch={fetch} />}
      {showEmptyText && <Empty>{emptyText}</Empty>}
      {allDataIsReady && children}
    </Wrapper>
  );
}

И использовать его в коде так:

render() {
  const { isLoading, isError, orderList } = this.props;

  return (
    <Block
      isLoading={isLoading}
      isError={isError}
      isEmpty={!ordersList.length}
      fetch={this.fetchOrdersList}
      emptyText="You don't have any orders."
    >
      {ordersList.map(order => <Order key={order.id} order={order} />}
    </Block>
  )
}

Название служебных дочерних компонентов компонента Block условные, но думаю суть их задач передают.

Здравствуйте.
Технологий взлома уйма.
В зависимости от того, какие привелегии получил "хакер" при вломе вашей БД - зависит очень много.
Если он получил доступ только на чтение, то захешированные в MD5 пароли ему мало чем помогут, т.к. MD5 не имеет алгоритма обратной расшифровки и хэширование спасёт тем, что взломщик получивший доступ на чтение паролей - самих паролей не получит (есть конечно словарь MD5 хешей, то это другая история).
Вообще для защиты любой БД есть несколько золотых правил:
0. Переименовать дефолтного админа и защитить его сложным паролем.
1. Для каждой БД должен создаваться свой владелец и несколько пользователей с разными наборами привелегий.
2. Ни у одного из пользователей, созданных в п.1 не должно быть прав на изменение таблиц в соседней БД.
Если есть необходимость обновлять соседние БД - делайте это триггером в соседней БД.
3. Каждый внешний веб-сервис должен ходить в БД только с тем набором прав, которых ему достаточно для работы. Т.е. не нужно везде прописывать root и надеяться на лучшее.
В этом случае, если взломщик получит привелегии этого пользователя, то сможет сделать только то, что разрешено этому пользователю. Тогда не выйдет "удалить все и сразу".
Например, для наполнения католога товаров в интернет-магазине может быть отдельный пользователь, с правами на SELECT, INSERT, UPDATE, DELETE в таблице SHOP_PRODUCTS, например. И ничего более.
А пользователи, приходящие в магазин за покупками могут делать SELECT, INSERT, UPDATE, DELETE только в таблицу CUSTOMER_CART. В коде веб-сервиса, естественно должна быть проверка, что покупатель редактирует СВОЮ корзину.
Для показа каталога товаров - отдельный пользователь, имеющий право только на SELECT из таблицы SHOP_PRODUCTS.
А продажу товара может делать отдельный пользователь, с правом только на UPDATE колонки AMOUNT в таблице SHOP_PRODUCTS. Пример:

GRANT SELECT ON shopdb.SHOP_PRODUCTS TO 'trader_bot'@'shophost';
GRANT UPDATE (AMOUNT) ON shopdb.SHOP_PRODUCTS TO 'trader_bot'@'shophost';

И т.п. По принципу "Разделяй и властвуй."
4. Писать запросы с использованием placeholder'ов (подстановку данных), что убережёт от SQL-инъекций.
Пример:

$DB->select('SELECT * FROM tbl WHERE a=? AND b=?', $a, $b);

5. Если и БД и приложение, используещее БД установлены на одном сервере - отключить удалённый доступ к БД и работать через сокеты.
6. Последний, но самый важный - БЕКАПЫ. При удалении всего и вся - нужно откуда-то восстановиться. Делайте бекапы и храните на отдельном сервере (не выставленном наружу).

По-хорошему redux.
Но вы так же можете передавать список из App в Items с колбек функцией, которая запишет в state компонента App id выбранного продукта, ее надо прокинуть через Items в каждый Item и там по клику вызывать:

class App extends Component {
  state = {
    activeItemId: -1,
  };
  
  selectItem = id => {
    this.setState({
       activeItemId: id,
    });
  };

  render() {
    const { items } = this.props;
    const { activeItemId } = this.state;
   
    const activeItem = items.find(item => item.id === selectedItemId);

    return (
      <Wrapper>
        <More item={activeItem} />
        <Items 
          items={items}
          onSelectItemCalback={this.selectItem}
        />
      </Wrapper>
    );
  }
}

1. Как грузить другой вебпак кофиг на продакшне? (Пока у меня просто в packege.json "build": "webpack -p"

scripts: {
  "dev": "webpack-dev-server --env.dev",
  "build": "webpack -p --env.prod"
}

webpack docs

2. Что использовать в этом кофиге(например как командой убрать все console.log() )?

UglifyJSPlugin + drop_console

3. Как сделать, чтобы sass компилировался в отдельный файл?

ExtractTextWebpackPlugin + sass-loader

А вообще, посмотрите в сторону create-react-app.

Вставка кода в компонент приводит к ошибке сборки(в принципе понятно почему):
'VK' is not defined no-undef

скорее всего eslint ругается попробуйте добавить в начало файла
/* global VK */