Ответы пользователя по тегу Redux
  • Где должен быть асинхронный вызов в Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Если кратко - в actions.

    Если подробно, то:
    Асинхронный вызов делается с участием middleware в actions. Таков ответ =)
    По полочкам: обычно используется redux-thunk, код которого очень прост: если actionCreator возвращает ФУНКЦИЮ - то нужно прокинуть в функцию store и dispatch аргументами. Таким образом, из дествий (actions) вы сможете выполнять асинхронные запросы.

    Подробно здесь
    Так же, там весь мини учебник по redux.

    ---

    Для роутинга в ответе на асинхронный запрос - придется использовать еще один middleware, об этом подробно будет написано здесь, раздел: подключаем redux. В данный момент уже почти все закончил, на неделе опубликую.
    Ответ написан
    1 комментарий
  • Где сохраняется файл сборки?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы все делаете правильно. Просто вы используете webpack в режиме dev-server (сервера разработчика), когда выполняете команду npm start, поэтому файла физически "как будто бы нет"

    Чтобы получить файл физически, нужно выполнить webpack, но с таким конфигом, возможно этого не произойдет.

    Кстати, чтобы понять, что делает npm start - загляните в package.json, там есть пункт: scripts
    Оттуда видно, что выполняется node server.js, то есть в этом случае npm start === node server.js (можете проверить, запустив из консоли node server.js)

    А уже server.js создает сервер и использует возможности webpack-dev-server
    Подробнее описано здесь
    Ответ написан
    Комментировать
  • В чем проблема с reducer в redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Консоль лог даже не выскакивает?
    Ночью вникать не очень хочется, просто по коду скажу - опечатка в
    resuls: {
          field,
          data
        }


    и лучше использовать payload, а не results. Так "типа" по стандартному соглашению.

    Скинь весь проект на github, и дай ссылку в комментарии.

    p.s. если что про redux на русском здесь
    Ответ написан
  • Как правильно разделить ответственность между состоянием интерфейса и дерева состояния в React и REDUX?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Слышал что если используешь redux то про функцию setState в большинстве случаев можно забыть.

    Не всегда, но обычно это не нужно. Подробнее можете ознакомиться в небольшом учебнике.
    Ответ написан
  • Как подружить React-Router onEnter и redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вопрос волнующий многих. Опишу два способа.

    1
    Есть альтернатива onEnter: компонент, проверяющий показывать ли содержимое, либо показывать "доступ запрещен", например. Сам способ я подсмотрел здесь, если вы понимаете достаточно глубоко redux - то все понятно.
    Если нет, то я когда-то должен закончить мини-учебник по роутингу и вернусь к этому ответу.

    2
    Чтобы в onEnter прокидывать "store", нужно обернуть роуты в функцию.

    Выглядит примерно так:
    export function getRoutes(store) {
      return (
        <div>
          <Route path='/' component={App}>
            <IndexRoute component={Home} />
            <Route path='/admin' component={Admin} onEnter={Admin.onEnter.bind(this,store)}/>
            <Route path='/genre/:genre' component={Genre}>
              <Route path='/genre/:genre/:release' component={Release} />
            </Route>
            <Route path='/list' component={List} />
          </Route>
          <Route path='*' component={NotFound} />
        </div>
      )
    }


    Здесь в компонент Admin есть метод onEnter (я его вынес туда, так как это удобнее по-моему), и в нем вы можете спокойно проверять токен. Так же можете использовать store.getState() и подобное. Не забывайте, про стандартные возможности redux - они открывают многое, для чего необязательно тащить библиотеки.

    export default class Admin extends Component {
      static onEnter(store, nextState, replace) {
        const user = store.getState().user
        if (!user) {
          replace('/')
        } 
      }
      render() {
        return (
          <div className='row'>
            <div className='col-md-12'>Раздел /admin</div>
          </div>
        )
      }
    }


    Тем не менее, вопрос для меня лично открыт. Я пытаюсь решить кейс с редиректом в ответе на action ;) Как только найду устраивающее решение, так сразу и закончу свой мини-туториал
    Ответ написан
    Комментировать
  • Послать json запрос на сервер с помощью redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    В главе "Асинхронные действия" разбирается.
    Вообще, там весь курс довольно короткий, можно посмотреть и понять как двигаются данные в redux приложении.
    Ответ написан
    3 комментария
  • Где и как нужно сделать AJAX запрос в redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Как было уже написано, да нужно использовать thunk-middleware, код которого кстати, очень простой!
    Суть в том, что нужно проверить: если ваш action возвращает функцию - значит прокинь в него dispatch и getState и жди что будет дальше, а если ваш action - простой объект (как и задумывалось) - сразу прокинь его дальше. Так и работают middleware - добавляя функционал и пробрасывая выполнение дальше.

    У меня есть подробное руководство по redux на русском, посмотрите здесь - https://www.gitbook.com/book/maxfarseer/redux-cour...

    Спасибо.
    Ответ написан
    Комментировать