Islam Ibakaev

const list1 = [{id:1}, {id:2}];
const list2 = [{id: 2}];
R.difference(list1, list2); // [{"id": 1}]

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;

.parent { text-align: center }
.child { display: inline-block }

class App extends React.Component {
	
	toggle() {
		this.page.classList.toggle('dark');
	}
	
	render() {
		return (
			<div 
				className="page" 
				ref={page => this.page = page}
			>
				<button 
					className=" center toggler"
					onClick={this.toggle.bind(this)}
				>
					Toggle
				</button>
			</div>
		);
	}
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

class MyComponent extends React.Component {

  static propTypes = {}

  static defaultProps = {}

  state = { number: 0 }

  componentDidMount() {}

  method1() {}

  // et cetera
}

// ./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)

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'} />);