Redux에서 입력 값 가져 오기

Redux를 배우려고합니다. 여기서 제가 잘못하고있는 것을 알고 싶습니다. 간단한 입력 필드가 있고 입력 필드에서 변경이 발생할 때마다 텍스트를 대문자로 만들려는 작업을 보내려합니다. 여기 내 돌아 오는 store입니다 :Redux에서 입력 값 가져 오기

여기

const TOCASE = (state="meow", action) => { 
    switch(action.type){ 
     case 'UPPER': 
     return state.toUpperCase() 
     case 'LOWER': 
     return state.toLowerCase() 
     default: 
     return state 
    } 
} 
const {createStore} = Redux; 
const store = createStore(TOCASE)

내 component입니다 :

const Case = React.createClass({ 
    render(){ 
    return(
     <div> 
     {this.props.text} 
     <input type="text" value={this.props.text} onChange={this.props.onUpper}/> 
     </div> 
) 
} 
}) 


const render =() => ReactDOM.render(<Case 
       text={store.getState()} 
       onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})} 
       />, document.getElementById('app')) 

render() 
store.subscribe(render)

출처

2016-09-24 Mahmud Adam

첫 번째 문제는 당신 ReactDOM.render 방법에

onUpper={(e)=>store.dispatch({type: 'UPPER', data : e.target.value})}

두 번째 문제는이 변경 사항을 어떻게 감속기에 적용 할 것인가입니다. 귀하의 감속기는 두 가지 매개 변수를 취하지 만 그것이 당신이 상태와 행동을 파견한다는 것을 의미하지는 않습니다. Redux의 createStore에서 Redux가 상태를 감속기로 전달한다는 것을 의미합니다. 이것을 배우고 Redux createStore를 살펴 보는 가장 좋은 방법. 매우 짧은 코드입니다. 나중에 고마워 할 것입니다.

그래서 당신의 감속기의 변화는 다음과 같습니다

switch(action.type){ 
     case 'UPPER': 
     return action.data.toUpperCase() 
     case 'LOWER': 
     return action.data.toLowerCase() 
     default: 
     return state 
    }

당신의 감속기가 작동하거나 파견 작동 방법에 대한 간단한 요약. 왜 내가 매개 변수를 취하는가 :

감속기에 첫 번째 매개 변수로주는 createStore 함수에서 앞서 말한 감속기가 호출되고 있습니다. 그래서 당신의 감속기를 가져 와서 파견 대상을 되찾고, 등등으로 돌아갑니다. 기본적으로이 함수는 createStore에서 작성된 함수에 대한 참조입니다.

액션을 파견 할 때마다 실제로 파견 함수 createStore를 호출합니다. 기본적으로이 디스패치를 암시 적으로 호출하는 것입니다. 나는 이것이 당신에게 일이 어떻게 작용 하는지를 알기를 바랍니다. 소스 코드를 확인하는 가장 좋은 방법.

출처

2016-09-24 17:15:48 FurkanO

나는이 점에서 다소 혼란 스럽다. 내 컴포넌트에서 getInitialState와 setState를 사용한다면 입력 텍스트는 기본적으로 상태가 아닐 것입니다. 그러나 redux를 추가 할 때, 나는 감속기에서 action.data를 반환하고 상태는 아닙니다. –

당신이 말하는 것은 사실입니다. Redux는 반응하는 국가 작업과 마찬가지로 작동하는 거대한 주 관리자와 같습니다. 귀하의 예제는 redux 상태가 필요하지 않지만 redux를 사용하여 코드를 작성하는 방법을 배우려면 redux를 사용하여 수행해야합니다. 귀하의 모범을 학습 단계로 삼으십시오. 당신의 경우에 정말로 이것을 필요로한다면 많이 생각하지 마십시오. 코드가 어떻게 돌아가는지, 어떻게 redux가 작동하는지에 집중하십시오. 거대한 국가가 필요하면 이미 무장 할 것입니다. – FurkanO

가게에 파견해야한다 액션 객체입니다. 감속기에서

onUpper={(e) => store.dispatch({ type: 'UPPER', text: e.target.value })}

는 코드가 있어야한다 :

onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})}

라인이 있어야한다 : 당신이 작업을 파견 곳

case 'UPPER': 
     return action.text.toUpperCase();

출처

2016-09-24 17:14:49 vijayst

Redux에서 입력 값 가져 오기

답변

관련 문제