React/Redux에서 일시적인 이벤트를 모델링하는 방법?

Question

Redux와의 반응이 모델링 UI 상태에서 우수하지만 가끔 이 발생하는 상황이 인 경우 UI는 개별적인 절차 방식으로 해당 이벤트를 처리해야하며 일시적인 이벤트를 생각하는 것이 적절하지 않은 경우가 있습니다 어떤 기간 동안 지속될 국가의 한 부분으로 JS 빈과 같은 코드 편집기 응용 프로그램에서

두 가지 예 :

• 는 사용자는 GitHub의의 요지에 자신의 코드를 보냅니다. 내보내기가 완료되면 요점을 표시하는 새 브라우저 창을 열려고합니다. 따라서 React 구성 요소 계층 구조는 요점의 ID를 알아야하지만 한 순간에만 창을 열어 요점 내보내기를 완전히 중단하지 않아야합니다.
• 사용자가 오류 메시지를 클릭하면 편집기에서 오류가 발생한 행을 편집기에서 집중하게합니다. 다시 한 번, UI는 어떤 시점에 집중해야하는지에 대해서만 신경을 쓴다. 즉, (비 반응 기반) 편집자에게 라인 집중에 중점을두고 모든 것을 잊어 버린다.

내가 함께 왔어요 적어도 만족스럽지 솔루션입니다 :

트리거 이벤트가 발생

• 이 (초점 요지의 ID, 선) 필요한 정보로 돌아 오는 상태를 업데이트하는 작업을 파견
• 해당 정보에 관심이있는 React 구성 요소는 라이프 사이클 후크 (componentWillReceiveProps 등)의 해당 소품을 모니터링합니다. 정보가 해당 소품에 나타나면 적절한 조치가 취해집니다 (요점 창을로드하고 편집기에서 줄을 모으는 중)
• 그러면 구성 요소는 본질적으로 "이 문제를 처리했습니다"라는 Redux 저장소에 다른 이벤트를 전달합니다. . 일시적인 이벤트 데이터는 Redux 상태에서 제거됩니다.

이런 상황에 더 적합한 패턴이 있습니까? 아마도 그림의 한 부분은 액션에 대한 UI의 응답이 항상 새 요소 창 구조를 열어 새 창을 열고 편집기의 API에서 메서드를 호출한다는 것입니다.

Answer 1

솔루션이 제대로 작동 할 것입니다. , 그러나 당신이 제기하는 이런 종류의 문제는 전혀 보잘것없는 것으로 취급되기에 특히 적합하다고 들리지 않습니다. 단순한 React를 사용하고 컴포넌트에 필요한 함수를 전달하는 것은 나에게 훨씬 자연 스럽습니다.

예를 들어, 일부 상태를 업데이트하는 동작을 디스패치하는 대신 새 동작을 트리거하는 동작 대신에 해당 동작을 디스패치하는 대신 새 창을 열지 않는 이유는 무엇입니까? 창을 여는 방아쇠를 당기기 위해 필요한 정보가 있다면, 같은 장소에서 창을 열 수 있어야합니다.

예를 들어, 오류 메시지를 클릭하여 비 필수, 필수 API를 호출하는 경우 가장 가까운 오류 메시지의 상위 항목과 편집기에서 함수를 전달하십시오. 부모는 편집기 주변의 래퍼에 대한 참조를 유지할 수도 있습니다. 깊이가 여러 단계 일지라도 pass down a function to set the ref 인 경우 원하는 것을 참조하는 것이 그리 나쁘지 않습니다. 따라서 상위에서 오류 메시지 구성 요소로 전달 된 함수는 편집기에서 유지 보수하는 메소드에서 간단히 메소드를 호출 할 수 있습니다.기본적으로 다음과 같은 내용이 있습니다.

class Parent extends Component { 
    constructor(...args) { 
     super(...args) 

     this.onErrorMessageClick = this.onErrorMessageClick.bind(this) 
    } 

    onErrorMessageClick(lineNumber) { 
     if (this.editor) { 
      this.editor.focusOnLine(lineNumber) 
     } 
    } 

    render() { 
     return (
      <div> 
       <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 1 } /> 
       <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 2 } /> 
       <EditorWrapper editorRef={ (editor) => { this.editor = editor } } /> 
      </div> 
     ) 
    } 
} 

const ErrorMessage = ({ onClick, lineNumber }) => (
    <button onClick={() => onClick(lineNumber) }> 
     { `Error Message For ${lineNumber}` } 
    </button> 
) 

// Just adding EditorWrapper because your editor and error messages probably aren't right next to each other 
const EditorWrapper = ({ editorRef }) => <Editor ref={ editorRef } /> 

class Editor extends Component { 
    focusOnLine(lineNumber) { 
     // Tell editor to focus on the lineNumber 
    } 

    render() { 
     ... 
    } 
} 

Answer 2

이러한 유형의 이벤트에는 종종 redux-thunk을 사용합니다.

본질적으로 정상 썽크를 설정하는 것과 다르지 않습니다. 단지 그 안에 액션을 보내지 않습니다.

const openGist = (id) =>() => { 
    // code to open gist for `id` 
} 

그런 다음이 작성자를 사용합니다. mapDispatchToProps에 매핑되고 onClick 처리기에서 호출되었습니다.

자주 묻는 질문은 구성 요소 자체에이 코드를 직접 삽입하면 안됩니다. 대답은 간단합니다. 테스트 가능성. 부작용을 일으키는 이벤트가 없으면 부작용을 일으키는 코드를 테스트하기가 쉽고 다른 요소와 격리되어 있으면 구성 요소를 테스트하는 것이 훨씬 쉽습니다.

다른 장점은 UX 설계자가 어느 시점에 들어가서 이러한 이벤트의 일부 (예 : 오류 행을 간략하게 강조 표시)에 대해 사용자에게 피드백을주기를 원하기 때문입니다. 이벤트에 대한 X_COMPLETED 조치는이 시점에서 훨씬 쉽습니다.