maxfarseer/redux-ru-tutorial

Внимание, вторая версия туториала (2018й год) здесь ->

redux-ru-tutorial

Код для Создание actions

Внимание

Вышла вторая версия учебника по React и по Redux. Данный репозиторий устарел. Приглашаю вас в новые учебники:

• React v2 учебник
• React v2 github
• Redux v2 учебник
• Redux v2 github

Полезные ссылки

Мои уроки/вебинары/соц.сети:

• Расписание стримов и вебинаров (на сайте есть текстовые версии вебинаров)
• Youtube канал c записями вебинаров и стримов
• Группа vkontakte
• Канал в telegram
• Twitter
• Facebook

redux-ru-tutorial's Issues

React + Hot Reload - Doesn't work after exporting in it's update!

Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
at Object.warnAboutIncorrectUsage (/Users/{USER}/{Desktop}/{Projects}/{redux_test}/node_modules/react-hot-loader/lib/index.js:7:11)
@ multi main

was added "react-hot-loader/babel" to the "plugins" section of your .babelrc file
and/or replaced "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of my Webpack configuration.

NOTHING HELPED!

ERROR on npm start

ERROR in ./src/index.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section o
f your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader
" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.

refs with redux Actions

Здравствуйте, решил писать на русском - думаю так будет проще ;)
Если Вы не против.
Изучаю Redux и решил пойти дальше, добавил форму логина и хотел использовать refs для получения значений из полей формы. Но тут оказалось не все просто. Ведь refs доступны только локально в модуле.
Я решил это следующим образом:

components/ser.js

...some code...

export default class User extends Component {
    handleSubmit(event){
        event.preventDefault();
        this.props.handleLogin(this.refs);
    }

    ...some code...

    template = <div>
            <form className='' onSubmit={this.handleSubmit.bind(this)} >
                <input type='text' placeholder='login' ref='login_input'/>
                <input type='password' placeholder='password' ref='password_input'/>
                <button type='submit' className='btn' onClick=''>Login</button>
            </form>
        </div>`

ations/UserActions.js

import ReactDOM from 'react-dom';
...some code...

export function handleLogin(refs) {
...some code...

    const login = ReactDOM.findDOMNode(refs.login_input).value.trim();
    const password = ReactDOM.findDOMNode(refs.password_input).value.trim();
...some code...

Есть ли способ по-легче обрабатывать input'ы форм?
Может в объявлять через 'const'? Правда если будет много форм\полей , то и путаницы не избежать.

Не запускается проект

Прохожу ваш курс и ошибка появилась на данном моменте
https://maxfarseer.gitbooks.io/redux-course-ru/content/es2015,_react_hmr.html
При запуске npm start выдает

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.loaders[0] has an unknown property 'plugins'. These properties are valid:
  object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }
  at webpack (D:\PROJECTS\redux-tutorial\node_modules\webpack\lib\webpack.js:19:9)
  at Object. (D:\PROJECTS\redux-tutorial\server.js:9:16)
  at Module._compile (module.js:571:32)
  at Object.Module._extensions..js (module.js:580:10)
  at Module.load (module.js:488:32)
  at tryModuleLoad (module.js:447:12)
  at Function.Module._load (module.js:439:3)
  at Module.runMain (module.js:605:10)
  at run (bootstrap_node.js:423:7)
  at startup (bootstrap_node.js:147:9)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the redux-tutorial package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs redux-tutorial
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls redux-tutorial
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Greyewi\AppData\Roaming\npm-cache_logs\2017-06-28T18_26_21_343Z-debug.log

Поправка ошибки в webpack.config

В одном из объяснений https://maxfarseer.gitbooks.io/redux-course-ru/content/pervieshagi_md.html вы можете наблюдать ошибки сборки для Webpack2.
Потратил чуть-чуть времени и вот решений без ошибок на 14.07.2018
https://gist.github.com/MikeWar1ock/27f3319979b7a044652fca7f900515df

npm start

И на шаге
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin()
],
после npm start получаем кучу ошибок, даже если плагины комментируем все ошибки ссылаеются на сам webpack.js

Please remove OccurenceOrderPlugin() from webpack config

According to js-dxtools/webpack-validator#155