2017-01-16 15 views
0

사용자가 입력 상자에 텍스트를 입력 할 수 있고이를 기반으로 API를 검색하려고합니다. reduxredux-thunk을 사용하고 있습니다. API 호출에 인수로 입력 된 텍스트를 어떻게 전달해야하는지 확신 할 수 없습니다.저장소를 react-redux로 업데이트하는 메소드에 인수를 넘김

내가 REDUX 및 썽크를 사용하지 않은 경우, 나는

this.state = { 
    movie: '' 
} 

로 된 구성 요소의 상태를 설정합니다 다음 input type=text에 나는 e.target.value으로 movieonChange을 업데이트 할 것입니다. redux와 반응 할 때 취해야 할 접근법은 무엇입니까?

내 코드는 다음과 같습니다. redux를 시작하는 때

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import {createStore, applyMiddleware} from 'redux'; 
import {Provider, connect} from 'react-redux'; 
import thunk from 'redux-thunk'; 
import axios from 'axios'; 

function reducer(state = 0, action) { 
    switch (action.type) { 
    case 'GET_MOVIE': 
     return action.data; 
    default: 
     return state; 
    } 
} 

const store = createStore(
    reducer, 
    applyMiddleware(thunk) 
); 


class App extends Component { 

    getMovie(){ 
     this.props.getMovie(); 
    } 

    render() { 
     return(
      <div> 
       <input type='text'> 
       <input type='submit' onClick={this.props.getMovie}> 
      </div> 
     ) 
    } 
} 

function getMovie(movie){ 
    return function(dispatch) { 
     axios.get('http://www.omdbapi.com/?t=' + movie) 
     .then(function(data){ 
      dispatch(resolvedGetMovie(data.data)); 
     }) 
    } 
} 

function resolvedGetMovie(data){ 
    return { 
     type: ' 
      GET_MOVIE ', 
     data: data 
    } 
} 

function mapStateToProps(state) { 
    return { 
     movie: state 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     getMovie :() => dispatch(getMovie()) 
    } 
} 

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App); 

render(
    <Provider store={store}> 
     <ConnectedApp /> 
    </Provider>, 
    document.getElementById('root') 
) 

답변

1

그것은 흥분 및 감속기 내의 모든 응용 프로그램의 상태를 배치하기가 쉽습니다. 그러나 양식 필드, UI 관련 상태 및 특정 구성 요소에만 관련된 기타 상태의 경우이 값을 component의 상태로 저장하는 것이 좋습니다. 귀하가 제공 한 예를 들어, 구성 요소의 상태에 input 값을 추적해야하고 예를 들어 액션 (getMovie)

에 그 값을 전달합니다

class App extends Component { 
    constructor(props) { 
     this.state = { 
      movie: '' 
     }   
    } 

    handleChange(e) { 
     this.setState({ 
      movie: e.target.value 
     }); 
    } 

    handleSubmit() { 
     const {movie} = this.state; 
     this.props.getMovie(movie); 
    } 

    render() { 
     const {movie} = this.state; 

     return(
      <div> 
       <input 
        type='text' 
        onChange={this.handleChange.bind(this)} 
        value={movie} 
       /> 
       <input type='submit' onClick={this.handleSubmit.bind(this)}> 
      </div> 
     ) 
    } 
} 
관련 문제