React Redux Saga Effect 不执行
React Redux Saga Effect doesn't execute
我正在使用 React with Redux and Saga。
当我尝试在我的组件中使用 this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});
执行 Saga Effect 时,没有任何反应,它没有被执行。
如果它运行,它应该将 "WorkGetDataBegin called" 记录到控制台,但什么也没有。
index.js //react的入口点
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import ConfigureStore from "./ConfigureStore";
import App from "./App";
//Create the redux store with saga middleware
const store = ConfigureStore();
$(window).load(function(){StartReact()});
function StartReact()
{
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('container')
);
}
ConfigureStore.js //初始化存储
import {createStore, applyMiddleware} from "redux";
import createSagaMiddleware from 'redux-saga'
import allReducers from "./AllReducers";
export default function ConfigureStore()
{
const sagaMiddleware = createSagaMiddleware();
const store = createStore(allReducers, applyMiddleware(sagaMiddleware));
return store;
}
App.js //组件
import React from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
class App extends React.Component
{
constructor(props)
{
super(props);
}
componentDidMount()
{
console.log("componentDidMount");
this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});
}
render()
{
return(
<div></div>
);
}
}
function mapStateToProps(state)
{
return {
}
}
function mapDispatchToProps(dispatch)
{
return bindActionCreators({}, dispatch);
}
export default connect(mapStateToProps)(App);
WorkGetData.js //传奇效果
import { takeEvery, delay } from 'redux-saga';
import { put, call } from 'redux-saga/effects';
//The name of the actionType
const actionType = "WORK_GET_DATA";
// ******** Calls ********
const actionTypeBegin = actionType +"_BEGIN";
const actionTypeAbort = actionType +"_ABORT";
// ******** Responses ********
const actionTypeSuccess = actionType +"_SUCCESS";
const actionTypePending = actionType +"_PENDING";
const actionTypeFailure = actionType +"_FAILURE";
//Watcher saga for BEGIN
export function* WatchWorkGetDataBegin()
{
yield* takeEvery(actionTypeBegin, WorkGetDataBegin);
}
//Saga for BEGIN
export function* WorkGetDataBegin()
{
yield call(console.log,"WorkGetDataBegin called");
//Notify the UI that the action started
yield put({ type: actionTypePending });
yield call(delay, 5000);
const payload = yield call(WorkGetDataAsync);
yield put({ type: actionTypeSuccess, payload: payload });
}
//Async function for fetching data
function* WorkGetDataAsync()
{
console.warn("Implement AJAX Request");
return(
{
companyName: "User's Company",
salary: 500.7
}
);
}
您定义了 WatchWorkGetDataBegin
saga,但从未 instructed the middleware 执行它。尝试类似的东西:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import ConfigureStore from "./ConfigureStore";
import WatchWorkGetDataBegin from "./WorkGetData";
import App from "./App";
//Create the redux store with saga middleware
const { store, middleware } = ConfigureStore();
middleware.run(WatchWorkGetDataBegin);
$(window).load(function(){StartReact()});
function StartReact()
{
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('container')
);
}
请注意,您还必须将商店和传奇中间件 ConfigureStore
修改为 return。
我正在使用 React with Redux and Saga。
当我尝试在我的组件中使用 this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});
执行 Saga Effect 时,没有任何反应,它没有被执行。
如果它运行,它应该将 "WorkGetDataBegin called" 记录到控制台,但什么也没有。
index.js //react的入口点
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import ConfigureStore from "./ConfigureStore";
import App from "./App";
//Create the redux store with saga middleware
const store = ConfigureStore();
$(window).load(function(){StartReact()});
function StartReact()
{
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('container')
);
}
ConfigureStore.js //初始化存储
import {createStore, applyMiddleware} from "redux";
import createSagaMiddleware from 'redux-saga'
import allReducers from "./AllReducers";
export default function ConfigureStore()
{
const sagaMiddleware = createSagaMiddleware();
const store = createStore(allReducers, applyMiddleware(sagaMiddleware));
return store;
}
App.js //组件
import React from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
class App extends React.Component
{
constructor(props)
{
super(props);
}
componentDidMount()
{
console.log("componentDidMount");
this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});
}
render()
{
return(
<div></div>
);
}
}
function mapStateToProps(state)
{
return {
}
}
function mapDispatchToProps(dispatch)
{
return bindActionCreators({}, dispatch);
}
export default connect(mapStateToProps)(App);
WorkGetData.js //传奇效果
import { takeEvery, delay } from 'redux-saga';
import { put, call } from 'redux-saga/effects';
//The name of the actionType
const actionType = "WORK_GET_DATA";
// ******** Calls ********
const actionTypeBegin = actionType +"_BEGIN";
const actionTypeAbort = actionType +"_ABORT";
// ******** Responses ********
const actionTypeSuccess = actionType +"_SUCCESS";
const actionTypePending = actionType +"_PENDING";
const actionTypeFailure = actionType +"_FAILURE";
//Watcher saga for BEGIN
export function* WatchWorkGetDataBegin()
{
yield* takeEvery(actionTypeBegin, WorkGetDataBegin);
}
//Saga for BEGIN
export function* WorkGetDataBegin()
{
yield call(console.log,"WorkGetDataBegin called");
//Notify the UI that the action started
yield put({ type: actionTypePending });
yield call(delay, 5000);
const payload = yield call(WorkGetDataAsync);
yield put({ type: actionTypeSuccess, payload: payload });
}
//Async function for fetching data
function* WorkGetDataAsync()
{
console.warn("Implement AJAX Request");
return(
{
companyName: "User's Company",
salary: 500.7
}
);
}
您定义了 WatchWorkGetDataBegin
saga,但从未 instructed the middleware 执行它。尝试类似的东西:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import ConfigureStore from "./ConfigureStore";
import WatchWorkGetDataBegin from "./WorkGetData";
import App from "./App";
//Create the redux store with saga middleware
const { store, middleware } = ConfigureStore();
middleware.run(WatchWorkGetDataBegin);
$(window).load(function(){StartReact()});
function StartReact()
{
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('container')
);
}
请注意,您还必须将商店和传奇中间件 ConfigureStore
修改为 return。