Islam Ibakaev

начальное состояние

const initialState = {auth: {}, lotteries:{}, categories: {}, tickets:{}}

сократи количество редьюсеров до 4(по одному на каждый кусок состояния)

const reducer = combineReducers({ auth, lotteries, categories, tickets})

посчитай прямо в компоненте

import { sum } from 'lodash'
...
// где-то в методе какого-то компонента
this.props.action(sum([a, b, c]))
...
const action = payload => ({
    type: ACTION_TYPE,
    payload
});

// actions.js
export const increaseNumber = value => ({ type: 'INCREASE_NUMBER', value })

//reducer.js
...
case 'INCREASE_NUMBER':
    return {...state, value: state.value + action.value}
...
// SmallApp.js
import { increaseNumber } from '..путь до/actions'
...
  render(){

    return (
      <div>
        <AddComponent add = {this.props.increaseNumber} />
      </div>
    )
  }
...

export default connect(mapStateToProps, { increaseNumber })(SmallApp)

p.s. подключение AddComponent к хранилищу излишнее

Я бы сказал, что redux-thunk, redux-saga или какое-то другое "решение" для организации сайд-эффектов не является необходимой зависимостью для любого приложения, написанного на reactjs.
Точно так же как и не является необходимостью сам redux. Но если ваше приложение нуждается в инструменте для управления состоянием(redux), то автоматически из этого следует, что оно так же нуждается в инструменте для организации сайд-эффектов.

В redux-thunk вы диспатчите функцию словно это action. Это очень важно. В контейнере вне зависимости от "природы" экшена, вы будете писать this.props.dispatch(whateverAction).

А ваш коллега, напротив, будет вынужден синхронные экшены диспатчить через this.props.dispatch(syncAction), а асинхронный просто вызовом функции, содержащей setTimeout.

Как-то не очень красиво, да и самому контейнеру не обязательно знать какие экшены синхронные, а какие асинхронные.

в идеале компонент не "взаимодействует" с api.
если используешь redux-thunk, то запрос на api совершает оператор(action creator), сам же контейнер всего лишь дёргает этот оператор в методе componentDidMount.

Прошу прощения, не совсем верно сформулировал влпрос. Я имел ввиду библиотеку, которая сохраняет полученные ассинхронным запросом данные в редуксе и затем снабжаете этими данными компоненты.

замени слово component на слово function и всё поймёшь

просто мысли вслух

// types
const types = {
	UPDATE_FIELD: 'UPDATE_FIELD',
};
//types

// operations
const updateField = (value, error) => (
	{ type: types.UPDATE_FIELD, value, error }
);

// reducer
const initialState = { 
	values: {email: '', password: ''}, 
	errors: { email: '', password: '' } 
};

function someFormReducer(state = initialState, action) {
	switch(action.type) {
		case types.UPDATE_FIELD: {
			return { 
				values: { ...state.values, ...action.value }, 
				errors: { ...state.errors, ...action.error };
		}
	}
	
	return state;
}
// reducer

// так примерно выглядит global store
{
	...
	...
	form: {
		login: {
			values: {
				email: '',
				password: '',
			},
			errors: {
				email: '',
				password: ''
			}
		},
	}
}
// так примерно выглядит global store


import React from 'react';
import { validateEmail, validatePassword } from 'someValidateLibrary';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
	
import { updateField } from 'path to operations file (action creators)' 

class SomeForm extends React.Component {
	
	handleValueChange = (e) => {
		const field = e.target.name;
		let error = '';
		
		if(field === 'email' && !validateEmail(field)) {
			error = "You email is so bad, seriously!";
		} 
		else if (!validationPassword(field) ) {
			error = "Your password is sucks!"
		}
		
		this.props.dispatch(
			updateField(
				{ field: e.target.value.trim() }, 
				{ field: error.trim() }
			)
		);
	} 

	proccessForm = () => {
		const { errors } = this.props;
		// если ошибок больше нет, то переход на другой роут
		if(!errors.email && !errors.password) {
			browserHistory.push('/home');
		} else {
			// your code here
		}
		
	}
	
	render() {
		const { values, errros } = this.props;
		
		return (
			// some ui
			<form onSubmit={this.proccessForm}>
				<p class="form-field">
					<input 
						type="email" 
						name="email" 
						onChange={this.handleValueChange} 
						value={values.email} 
					/>
					<span>{errors.email}</span>
				</p>
				<p class="form-field">
					<input 
						type="text" 
						name="password" 
						onChange={this.handleValueChange} 
						value={values.password} 
					/>
					<span>{errors.password}</span>
				</p>
				<button 
					type="submit" 
					disabled={!values.email && !values.password}>
						submit
				</button>
			</form>
		);
	}
}

const mapStateToProps = ({ form: { login } }) => (
  { values: login.values, errors: login.errors }
);
	

connect(mapDispatchToProps)(SomeForm);

о каких проблемах идёт речь? ты просто перечислил "недостатки", не объяснив в чём дело, с какой реальной проблемой столкнулся?

это всё равно, что я скажу, что претензии надуманные, не объясняя почему я так думаю.

Справка(упрощённо).
Аутентификация - вход в систему.
Авторизация - получение доступа к инфе из базы данных.

Если ты создаёшь сессию для пользователей своего приложения, то когда юзер залогинился на сервере инициируется сессия и сервер в куках отправляет на клиент session id.
В последующих запросах к базе данных сервер читает этот session id из кук, обращается к некой внутренней базе ( обычно имеет форму ключ-значение, где ключ - это session id, значение - mail пользователя, к примеру ) затем обращается к базе данных, достаёт данных для пользователя ( мы определили его на предыдущем шаге ) и возвращается в response.
Такая система называется stateful ( поскольку мы вынуждены хранить инфу об аутентифицированных пользователях на сервере ). Это не вяжется с концепцией RESTful API, подразумевающей, что сервер должен быть stateless ( не хранить инфу аутентифицированных пользователях ).
Добиться этого помогает json web token, поскольку он хранит всю необходимую для авторизации пользователя инфу. Это позволяет тебе написать RESTful API(stateless)

Что почитать: session-based authentication, token-based authentication

лучше как-то так, чтобы не повторяться

import { compose, createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import * as reducers from './reducers';
import promises from './middlewares/promises';


const reducer = combineReducers(reducers);
const middlewares = [promises];

if(process.env.NODE_ENV === 'development') {
  
  if(process.browser) {
    middlewares.push(createLogger());
  }
  
  // другие миддлвары, которые использовать только в этой среде
}

const store = compose(applyMiddleware(...middlewares))(createStore)(reducer);

export default store;

ты же делаешь запрос на сервер, которого у тебя нет, поэтому и ошибка.
нужно набросать простенький express сервер с wildcard роутом в entry point файле, примерно так

// ./index.js
const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// Handles all routes so you do not get a not found error
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

где бы ты не делал перезагрузку страницы тебя будет выкидывать на главную.

p.s. почитай про server-side rendering with react

то что у тебя(разве что reducer не экспортировал по дефолту)
https://github.com/erikras/ducks-modular-redux

если кажется, что слишком много кода в одном файле, то может пойти ещё дальше
https://github.com/alexnm/re-ducks

Если сомневаешься нужна ли тебе эта зависимость в проекте, значит она не нужна.

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

function connect(...mappers){
	// не знаю как connect получает доступ к store, поэтому тупо захардкодил, но это не важно 
       // чтобы ответить на вопрос
	const store = {
		getState() {
			return {
				players: ['Rooney', 'Mata', 'Messi', 'Ronaldo', 'Zlatan']
			}
		},
		dispatch(actionCreator) {
			return function (...args) {
				return Promise
					.resolve( actionCreator(...args) )
					.then(() => console.log(`I have just called ${actionCreator.name} actionCreator`));
				};
			}
	};
	
	let fromStore = {};
	
	if(typeof mappers[0] === "function") {
		const state = store.getState();
		const stateToProps = mappers[0](state);
		
		fromStore = {...stateToProps};
	}

	if(typeof mappers[1] === "function") {
		fromStore = { ...fromStore, ...mappers[1](store.dispatch) };
	}
	
	
	return function(MyComponent) {
		const HOC = Component => props =>
			<Component dispatch={store.dispatch} {...fromStore}  {...props}  />
		
		return HOC(MyComponent);
	};
}


const App = (props = { a: 1, b: 2 }) => (
	console.log('App props', props)
);

const fetchData = (api) => console.log(`I am gonna fetch some data from this api ${api}`)

const mapStateToProps = state => ({ players: state.players });
const mapDispatchToProps = dispatch => ({ fetchData:  dispatch(fetchData) });
	
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

console.log('connectedApp props', ConnectedApp({ hello: 'hello kitty' }).props);

должен признать что вот так не работает

console.log('connectedApp props', <ConnectedApp hello={'hello kitty'} />);

в примере, а должно, но я не хочу париться, поскольку этого примера достаточно
вот можно поиграться codepen.io/dagman/pen/Ppajeg