왜 두 가지 버전의 고차 함수가 동일한 결과를 제공하지 않습니까?

Question

이하 내내 응용 프로그램의 상태 (나는 이것이 똑똑한 방법이 아니라는 것을 알고 있지만 내 질문은 Redux가 아닌 JS 구문과 관련되어 있음)이되도록 Redux 저장소의 디스패치 기능을 수정합니다. 두 가지 버전의 higher order 함수 addLoggingToDispatch(dispatch)이 있으며 유일한 차이점은 두 번째 버전이 모든 함수 정의에서 arrow 함수를 사용한다는 것입니다.

질문 : 왜 addLoggingToDispatch의 두 가지 구현이 똑같지 않습니까? JS와 화살표 함수에 대한 나의 이해에서 그들은 동일하지만, 나는 브라우저에서 같은 결과를 얻지 못한다. 그래서 나는 왜 그런지 이해하고 싶다.

예상되는 동작 : 특히, 어떤 코드가 아래 수행하면 "DOMContentLoaded"이벤트가 발생할 때, 난 그냥 원래의 파견을 호출하는 내 자신의 addLoggingToDispatch, 원래 돌아 오는 store.dispatch 기능을 대체한다는 것입니다 (행동) 함수 내 응용 프로그램의 상태를 콘솔에 기록하는 것 사이에

조치는 내 애플리케이션의 keydown 또는 keyup 이벤트에 발송됩니다. 따라서 사용자가 단순히 키를 누르고 키를 놓으면 콘솔에 4 개의 메시지 (이벤트 전후의 응용 프로그램 상태)가 표시됩니다.

addLoggingToDispatch의 첫 번째 버전에서는 로깅이 예상대로 작동합니다. 두 번째 버전에서는 사용자가 키를 눌렀다 놓으면 로깅이 끝나지 않고 결국 모든 메모리를 다 사용합니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { applyMiddleware } from 'redux'; 

import configureStore from './store/store'; 
import Root from './components/root'; 

//VERSION 1: working version 
const addLoggingToDispatch = (store) => { 
    const dispatch = store.dispatch; 
    return (action) => { 
    console.log("Old State: ", store.getState()); 
    console.log("Action: ", action); 
    dispatch(action) 
    console.log("New State", store.getState()); 
    } 
} 

// VERSION 2: does not work 
const addLoggingToDispatch = store => action => { 
    const dispatch = store.dispatch; 
    console.log("Old State: ", store.getState()); 
    console.log("Action: ", action); 
    dispatch(action) 
    console.log("New State", store.getState()); 
} 

document.addEventListener('DOMContentLoaded',() => { 
    const store = configureStore(); 
    store.dispatch = addLoggingToDispatch(store); 
    debugger; 
    const rootEl = document.getElementById('root'); 
    ReactDOM.render(<Root store={store} />, rootEl); 
}); 

Answer 1

차이는 있지만 단지 dispatch 변수의 생성과, 화살표 기능 할 수 없다. 주석에 언급 된 @nnnnnn과 같이, 덮어 쓰기 전에 속성을 저장하지 않으면 무한 재귀가 생성됩니다.

그러나 작업 버전조차도 매우 나쁜 접근 방법입니다. store.dispatch을 덮어 쓰고 원래 값을 저장하는 것은 코드 기반 위에 흩어져있는 대신 동일한 위치에서 일어나거나 심지어 하나의 함수로 분해되어야합니다. 이것은 여기서 일어나는 일을 이해하는 데 도움이되며 자신과 같은 실수를 예방합니다.
더 나은 한 줄에 dispatch 포장 :

const addLogging = (state, fn) => function(x) { 
    console.log("Before: ", state()); 
    console.log("Argument: ", x); 
    fn.call(this, x); 
    console.log("After: ", state()); 
}; 

document.addEventListener('DOMContentLoaded',() => { 
    const store = configureStore(); 
    store.dispatch = addLogging(() => store.getState(), store.dispatch); 
    const rootEl = document.getElementById('root'); 
    ReactDOM.render(<Root store={store} />, rootEl); 
});