문서에 따르면 "미들웨어없이 Redux 저장소는 동기식 데이터 흐름 만 지원합니다 . " 나는 이것이 왜 그런지 이해하지 못한다. 컨테이너 구성 요소가 비동기 API를 호출 한 다음 dispatch동작을 호출 할 수없는 이유는 무엇 입니까?
예를 들어, 간단한 UI : 필드와 버튼을 상상해보십시오. 사용자가 버튼을 누르면 필드가 원격 서버의 데이터로 채워집니다.
import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';
const ActionTypes = {
STARTED_UPDATING: 'STARTED_UPDATING',
UPDATED: 'UPDATED'
};
class AsyncApi {
static getFieldValue() {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(Math.floor(Math.random() * 100));
}, 1000);
});
return promise;
}
}
class App extends React.Component {
render() {
return (
<div>
<input value={this.props.field}/>
<button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
{this.props.isWaiting && <div>Waiting...</div>}
</div>
);
}
}
App.propTypes = {
dispatch: React.PropTypes.func,
field: React.PropTypes.any,
isWaiting: React.PropTypes.bool
};
const reducer = (state = { field: 'No data', isWaiting: false }, action) => {
switch (action.type) {
case ActionTypes.STARTED_UPDATING:
return { ...state, isWaiting: true };
case ActionTypes.UPDATED:
return { ...state, isWaiting: false, field: action.payload };
default:
return state;
}
};
const store = Redux.createStore(reducer);
const ConnectedApp = connect(
(state) => {
return { ...state };
},
(dispatch) => {
return {
update: () => {
dispatch({
type: ActionTypes.STARTED_UPDATING
});
AsyncApi.getFieldValue()
.then(result => dispatch({
type: ActionTypes.UPDATED,
payload: result
}));
}
};
})(App);
export default class extends React.Component {
render() {
return <Provider store={store}><ConnectedApp/></Provider>;
}
}내 보낸 구성 요소가 렌더링되면 버튼을 클릭하면 입력이 올바르게 업데이트됩니다.
통화 중 update기능에 유의하십시오 connect. 앱에 업데이트 중임을 알리는 작업을 전달한 다음 비동기 호출을 수행합니다. 호출이 완료되면 제공된 값이 다른 조치의 페이로드로 전달됩니다.
이 접근 방식에 어떤 문제가 있습니까? 설명서에서 제안하는 것처럼 왜 Redux Thunk 또는 Redux Promise를 사용하고 싶습니까?
편집 : 나는 Redux 저장소에서 단서를 찾아서 과거에는 Action Creators가 순수한 기능이어야한다는 것을 알았습니다. 예를 들어 다음 은 비동기 데이터 흐름에 대한 더 나은 설명을 제공하려는 사용자입니다.
액션 생성자 자체는 여전히 순수한 함수이지만 반환하는 썽크 함수는 필요하지 않으며 비동기 호출을 수행 할 수 있습니다
액션 제작자는 더 이상 순수 할 필요가 없습니다. 따라서 과거에는 썽크 / 약속 미들웨어가 필요했지만 더 이상 그렇지 않은 것 같습니다.
53
액션 제작자는 순수한 기능 일 필요가 없었습니다. 변경 사항이 아닌 문서에서 실수였습니다.
—
Dan Abramov
테스트 가능성을 위해 @DanAbramov 그러나 그것은 좋은 사전 예방 적 일 수 있습니다. Redux-saga는 이것을 허용합니다 : stackoverflow.com/a/34623840/82609
—
Sebastien Lorber
