2017-04-25 5 views
0

아래의 한 프로젝트에서 Redux를 Flux와 결합 (상호 작용)하는 것이 좋은 해결책입니까? 상태 (inputText)는 우리 구성 요소 (TOdoInput)에 있으며 저장소에있는 것이 아니기 때문에 Redux에 있어야합니다. Redux에서 로컬 상태를 갖는 것이 맞습니까?Rex와 Rexx의 합류

class TodoInput extends Component { 

    constructor(props, context) { 
    super(props, context) 
    this.state = { 
     inputText: '' 
    } 
    } 

    handleChange(event) { 
    this.setState({ 
     inputText: event.target.value 
    }) 
    } 

    handleSubmit(event) { 
    event.preventDefault() 
    this.props.addTodo(this.state.inputText) 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <input 
      type="text" 
      placeholder="Type in your todo" 
      value={this.state.inputText} 
      onChange={this.handleChange.bind(this)} 
      /> 
      <input type="submit" value="Submit"/> 
     </form> 
     </div> 
    ) 
    } 
+0

Flux는 React 관련 상점 및 액션 크리에이터 외부에있는 특정 데이터 패턴을 나타냅니다. http://blog.andrewray.me/flux-for-stupid-people/ 당신은 방금 상태라고 부를 수있는 컴포넌트 상태를 사용하고 있습니다. :) –

답변

0

예. 맞습니다.

로컬 (구성 요소 상태) vs 글로벌 상태 (감소 기)는 문제입니다.

는 예를 들어 활성화 된 탭 알아야 사용자 정보

  • 탭들의 바를 표시하는 탭 바 요소를 가지고. 다른 구성 요소가 신경 쓰지 않으므로 this.state으로 처리되는 로컬 구성 요소 상태가 될 수 있습니다.
  • 반면에 탭의 사용자 정보는 전 세계적 관심사입니다. 실제로 많은 구성 요소 앱은 이름, 연령 등을 표시하는 데 관심을 가져야합니다. 따라서이 상태는 감속기에 저장해야합니다.

TodoInput의 주요 역할은 감속기에 보낼 텍스트를 준비하는 것입니다. 따라서 입력 값은 사용자가 입력하는 동안 만 중요합니다.

  • 당신이 서비스에 요청할 수 있습니다 텍스트를 포맷 할 수는 오타
  • ... 당신은 텍스트가 당신의 우려와 OK 있는지 일단

가있다 앱에서 유효성을 검사합니다. 이 단계에서 귀하의 관심은 변화를 소중하게 생각합니다. 이제는 다른 구성 요소에 의해 소비 될 수있는 값입니다. 따라서 글로벌 저장소 (redux reducer)에 저장해야합니다.

+0

하지만이 경우에는 (입력 값을 가져옵니다) 좋은 해결책입니다. 예? – Lukas

+0

내 대답을 편집했습니다. – dagatsoin