Pogran

Опираясь на то, что вам не подошел ответ с Auth0

Что в таком случае "модуль авторизации/регистрации"? Здесь вопрос поставлен не верно может быть?.
Изначально, если мы говорим про Auth0 - это подходит под слово модуль (бэкэнд + готовые формочки, которые они дают вместе с примерами).

Если же мы говорим про задачу frontend-разработчика, то она звучит так:
1) Сверстай формы (включая валидацию и что еще нужно, например disabled для кнопки, если не заполнено обязательное поле)
2) По клику на кнопку "войти" / "зарегистриоваться" - отправляй POST запрос с данными.
2.5) Так как у вас приложение на React+Redux, значит необходимо создать action creator, который диспатчит, что-то в стиле USER_SIGN_IN_REQUEST (SUCCESS), и reducer для хранения инфы о юзере (если нужно).

На этом кончаются задачи фронтэндщика.

А то решений сейчас много и не знаю какое выбрать

Скиньте пример, потому что я не понимаю о каких "решениях" идет речь, так как вижу ответом на ваш вопрос: две формы + стандартный набор для react-redux приложения.

P.S. возможно вы имели ввиду под модулем, что-то в стиле форма + войти через соц.сеть/сервис - тогда да, я вас понял, но подсказать готовый не могу.

тоже вчера на codecademy проходил... Но там наверное азы ((

У вас клик на ссылке, а data-* на элементе <i>
Когда кликаете по ссылке - e.target = ссылка и у нее нет data-*
Когда в клике попадаете на i = все хорошо.

Если objectPath.del удаляет данные из obj_str, то измените код так, чтобы фукнция objectPath.del возвращала результирующий объект:

objectPath.del = (obj, level) => {
  // тут логика удаления данных по уровню

  return updated_obj; // возвращаем измененный объект
}

После этого в коде можно пользоваться именно как вы хотели

case DELETE_STRUCTURE_COUPLE:
      return {
        ...state,
        structure: objectPath.del(state.structure, action.level)
      };

Можно например вот так:

case DELETE_STRUCTURE_COUPLE:
      return {
        ...state,
        structure: objectPath.del(state.structure, action.level)
      };

при этом необходимо, чтобы objectPath.del возвращал изменненый первый аргумент,
однако не думаю, что это сделает код более читабельным. А вообще используйте что-то вроде https://facebook.github.io/immutable-js/ чтобы не изменять предыдущий state.

Дело в том, что React "умный". Он понимает, что надо рендерить тот же компонент, и не заменяет его.
В данном случае, Вы можете получить новые props в методе componentWillReceiveProps и сделать там setState().

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

Во-первых - onClick={this.updateClick('params')} - что вы ожидаете от такой записи? Давайте поразмышляем: в onClick вы должны передать функцию-обработчик, а вы передаете РЕЗУЛЬТАТ функции this.updateClick так как вызываете ее с ( )

Во-вторых, как вам правильно подсказали, можно использовать .bind для передачи параметров.
Для этого, сначала идем в MDN, читаем. Пытаемся передать функцию с параметром в качестве домашнего задания. Подсказка: .bind ставит ваши параметры в начало. То есть все аргументы сдвигаются (в том числе и "e").

P.S. Если не получится, то можете посмотреть ответ по ссылке.

P.P.S. Очень важно понять, что есть результат работы функции. То есть, в вашем вопросе, вы передавали в onClick - e.preventDefault(), причем именно это, а не "функцию, которая по клику бы срабатывала и происходил бы e.preventDefault()). В случае с bind, вы передаете результат работы функции bind, который является функцией, другими словами - "все корректно, в onClick передается функция".

DEMO.

const initalState = {
  foo: 'bar',
  baz: 'pew',
  structure: [
    ['', ''],
    ['', ''],
  ],
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_INPUT':
      return {
        ...state,
        structure: state.structure.map((v1, k1) => {
          if (k1 === action.first) {
            return v1.map((v2, k2) => {
              if (k2 === action.second) {
                return action.value;
              } else {
                return v2;
              }
            });
          } else {
            return v1;
          }
        }),
      };
      break;

    default:
      return state;
  }
};

const newState = reducer(initalState, {
  type: 'ADD_INPUT',
  first: 0,
  last: 0,
  value: 'foo',
});

console.log(initalState);
console.log(newState);

Object.keys(myObj).map(key => <div key={key}>{myObj[key]}</div>)

Вы же используете webpack?
Ошибка скорее всего в неправильном подключении файла с кодом (bundle.js обычно). Такая ошибка обычно выглядит в консоли так . Здесь подробнее.

Не могу точнее ответить на вопрос без кода запуска сервера и возможно пригодится еще код webpac-dev-server и webpack-config файлов.

Вы должны понимать, что, возможно, у пользователя поля будут все в перемешку.
Если используете lodash/underscore, то: _.map
Если нет, то приводите объект к массиву:

var arr = [];
for(let key in obj) arr.push(<div key={key}>{obj[key]}</div>);

return <div>{arr}</div>;

Давайте по порядку:
1) this не видит, потому что у стрелочной функции нет своего контекста (пример, учебник)

2) прокидывать this в mapDispatchToProps не нужно. Если вы хотите изменить state опираясь на новые данные, то это нужно делать в componentWillReceiveProps методе.

3) чтобы пришли новые props, вам нужно их обработать в редьюсере, а для этого вам нужно вызывать в mapDispatchToProps ваш экшен-крейтор. То есть mapDispatchToProps будет выглядеть так (обратите внимание на круглые скобки после => , это сделано, чтобы не писать rerturn {...}):

const mapDispatchToProps = (dispatch) => ({
  fetchEntities: (limit, offset) => dispatch(fetchEntities(limit, offset))
})

для этого, конечно же импортировать из actions ваш fetchEntities. В котором у вас promise версия, в которой будете обрабатывать пришедшие данные. Теория по этому поводу здесь, либо можете посмотреть теорию+пример на русском языке здесь.

3.5) В mapStateToProps у вас должно быть соответствующее свойство, в которое вы будете из reducer'a прокидывать ваши новые props, и из-за этого сработает componentWillReceiveProps внутри которого вы сможете вызывать this.setState.

А зачем через Promise? У вас обычный синхронный код проверки и все. Пусть будет:

...
router.post('/', (req, res) => {
    const {errors, isValid} = validateInput(req.body);

    if(!isValid) {
        return res.status(400).json(errors);
    } else {
        return res.status(200).json({data: 'bla-bla-bla'})
    }
});
...

Ну а сам axios заранее "промисифицированный". Взял пример из документации:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Если я вас правильно понял, то вы хотели бы использовать then/catch у axios, но думаете, что если роутер экспресса не возвращает promise - это невозможно? Нет, это не так.

Если вернет ошибку - выполнится catch, если вернет "ок" - выполнится then. Не могу сказать по памяти, но res.status(400) может сработать как then, потому что вернуто не "ошибочное" значение. Тогда просто вместо res.status(400) бросьте исключение (типа new Error ...) и тогда точно catch сработает.

Скорее всего из-за введенных ограничений инстаграма. Если не ошибаюсь они сейчас для приложений в сандбох (не прошедших модерацию) вообще не отдают больше 20 айтемов чего-либо (фоток, подписок и тд).

Используйте альтернативные решения.

Оба варианта одинаковы, просто в 1-м случае мы явно импортируем Component из react библиотеки и от него наследуемся:

import React, { Component } from 'react';
class App extends Component {}

import React from 'react';
class App extends React.Component {}

Все что нужно есть: redux react mongodb webpack route
https://github.com/reactGo/reactGo
чтобы разобраться рекомендую отматывать от ближайшего к пользователю jsx компонента->actions->reducers-> и т.д. вниз по цепочке до базы данных

Сделайте экшен, который будет отвечать за подгрузку начальных данных. Сама загрузка должна происходить не в момент создания редьюсеров, а на старте приложения. Например так:

const store = createStore(history, client, initialState)

store.dispatch(appActions.loadInitialData())

render((
  <Provider store={store}>
    <Router history={finalHistory}>
      {routes}
    </Router>
  </Provider>
), reactRootElement)

А в loadInitialData уже загружайте данные через ajax, например:

function loadInitialData() {
  return dispatch => axios
    .get(`${apiPrefix}/entities`)
    .then(entities => dispatch(saveEntities(entities)))
}

Пример очень общий, но суть, надеюсь, ясна.

PS не забудьте thunk middleware