Почему в React созданные функции(методы) вызываются без аргументов?

Question

[Artem10]

Сразу пример.

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispachToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const App = connect(mapStateToProps, mapDispachToProps)(Main);

Мы создали 2 функции Map они принимают параметры, НО ПОЧЕМУ КОГДА МЫ ИХ ПЕРЕДАЕМ В КОНЕКТ, МЫ ЭТО делаем без указания аргументов. Для первой мап нам надо бы передать стейт, а Мы этого не делаем . Как тогда наша функция МАП подхвачивает ТОТ необходимый СТЕЙТ, если мы его не передали ?

Answer 1

[Боб Хоуп]

Дело в том, что в данном случае мы не вызываем функции, мы просто передаем их другой функции (connect) в качестве аргументов.

Затем внутри функции connect они будут вызваны в нужное время с нужными аргументами.

Вот кусочек кода из исходников, где объявляется функция connect:

function connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    {
      pure = true,
      areStatesEqual = strictEqual,
      areOwnPropsEqual = shallowEqual,
      areStatePropsEqual = shallowEqual,
      areMergedPropsEqual = shallowEqual,
      ...extraOptions
    } = {}
  ) {
    ...
  }

Как видите, функция connect ожидает функции mapStateToProps и mapDispatchToProps как первые два аргумента.

Answer 2

[Максим]

// для примера обе переменные (store и dispatch) объявлены в той же области видимости
// на самом деле их нет в вашем файле компонента
// Так как функция connect вызывается "где-то там, где они доступны"
// вы имеете к ним доступ
let dispatch = () => console.log("dispatch")
let store = { user: { name: 'Mike', age: 15 }, data: [1,2,3] }

function connect(mapStateToProps, mapDispatchToProps) {
  console.log(mapStateToProps(store))
}

function mapStateToProps(storeFromClosure) { // здесь оказывается глобальный store доступный из замыкания
  return {
    myData: storeFromClosure.data 
  }
}

connect(mapStateToProps, null)

Comments

[Artem10]

Значить аргумент(стайт) подтягиваются к мап функции через [[Scope]] замыкания?

Answer 3

[Islam Ibakaev]

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

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