Redux Sagas - 调度未定义
Redux Sagas - dispatch undefined
我是 redux-sagas 的新手,我仍在努力了解它们的工作原理。我正在尝试将 redux-saga 函数绑定到我的组件之一,该组件发出 API 请求,然后使用响应中的数据分派操作。当我尝试根据他们的文档将分派传递给我的 saga 函数参数时,我收到分派未定义的错误。这是我的设置:
缩略图容器
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getThumbnails } from '../../../containers/search/sagas';
import createReducer from './reducers';
class ThumbnailsContainer extends PureComponent {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.getThumbnails()
}
render() {
return (
<div>My Container</div>
)
}
}
function mapDispatchToProps(dispatch) {
return {
getThumbnails: bindActionCreators(getThumbnails, dispatch)
}
}
export default connect(null, mapDispatchToProps)(ThumbnailsContainer);
Sagas.js
export function* getThumbnails(dispatch) {
console.log(dispatch)
yield fetch('myAPIurl', {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: {}
}).then(res=>res.json())
.then(res => {
console.log(JSON.parse(res.data))
});
}
rootsagas.js
import { all, fork } from 'redux-saga/effects';
export default function* rootSaga() {
yield all([
fork(getThumbnails)
]);
}
Stores.js
import { applyMiddleware, compose, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootsagas';
const sagaMiddleware = createSagaMiddleware();
const apolloMiddleware = apolloClient.middleware();
export default function configureStore(initialState = {}, history) {
const middlewares = [
sagaMiddleware
];
})
store.runSaga = sagaMiddleware.run(rootSaga);
store.asyncReducers = {}; // Async reducer registry
const store = createStore(createReducer(), applyMiddleware(...middlewares));
store.runSaga = sagaMiddleware.run(rootSaga);
store.asyncReducers = {}; // Async reducer registry
return store;
我想做的是在收到 API 响应后发送一个动作,但似乎无法获得发送功能。在他们的文档中看不到我哪里出错了?
不确定是否正确。尝试使用 redux-saga
中的 put
。喜欢下面
import { put } from 'redux-saga/effects';
function* yourGenerator() {
/*Your code*/
yield put({ type: 'YOUR_ACTION', YOUR_PAYLOAD });
}
阅读更多有关使用 saga 的调度操作的信息 here。
我是 redux-sagas 的新手,我仍在努力了解它们的工作原理。我正在尝试将 redux-saga 函数绑定到我的组件之一,该组件发出 API 请求,然后使用响应中的数据分派操作。当我尝试根据他们的文档将分派传递给我的 saga 函数参数时,我收到分派未定义的错误。这是我的设置:
缩略图容器
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getThumbnails } from '../../../containers/search/sagas';
import createReducer from './reducers';
class ThumbnailsContainer extends PureComponent {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.getThumbnails()
}
render() {
return (
<div>My Container</div>
)
}
}
function mapDispatchToProps(dispatch) {
return {
getThumbnails: bindActionCreators(getThumbnails, dispatch)
}
}
export default connect(null, mapDispatchToProps)(ThumbnailsContainer);
Sagas.js
export function* getThumbnails(dispatch) {
console.log(dispatch)
yield fetch('myAPIurl', {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: {}
}).then(res=>res.json())
.then(res => {
console.log(JSON.parse(res.data))
});
}
rootsagas.js
import { all, fork } from 'redux-saga/effects';
export default function* rootSaga() {
yield all([
fork(getThumbnails)
]);
}
Stores.js
import { applyMiddleware, compose, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootsagas';
const sagaMiddleware = createSagaMiddleware();
const apolloMiddleware = apolloClient.middleware();
export default function configureStore(initialState = {}, history) {
const middlewares = [
sagaMiddleware
];
})
store.runSaga = sagaMiddleware.run(rootSaga);
store.asyncReducers = {}; // Async reducer registry
const store = createStore(createReducer(), applyMiddleware(...middlewares));
store.runSaga = sagaMiddleware.run(rootSaga);
store.asyncReducers = {}; // Async reducer registry
return store;
我想做的是在收到 API 响应后发送一个动作,但似乎无法获得发送功能。在他们的文档中看不到我哪里出错了?
不确定是否正确。尝试使用 redux-saga
中的 put
。喜欢下面
import { put } from 'redux-saga/effects';
function* yourGenerator() {
/*Your code*/
yield put({ type: 'YOUR_ACTION', YOUR_PAYLOAD });
}
阅读更多有关使用 saga 的调度操作的信息 here。