사용자가 입력 상자에 텍스트를 입력 할 수 있고이를 기반으로 API를 검색하려고합니다. redux
및 redux-thunk
을 사용하고 있습니다. API 호출에 인수로 입력 된 텍스트를 어떻게 전달해야하는지 확신 할 수 없습니다.저장소를 react-redux로 업데이트하는 메소드에 인수를 넘김
내가 REDUX 및 썽크를 사용하지 않은 경우, 나는
this.state = {
movie: ''
}
로 된 구성 요소의 상태를 설정합니다 다음 input type=text
에 나는 e.target.value
으로 movie
값 onChange
을 업데이트 할 것입니다. 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')
)