Question

这是代码

<ipAdress>192.100.200.323-327</ipAdress>

这是我的组件：

//REDUCER.js

import { call, take, fork } from 'redux-saga/effects';
import { request } from '../../utils';

export const LOGIN_REQUEST = "LOGIN_REQUEST";
const LOGIN_SUCCESS = "LOGIN_REQUEST";
const LOGIN_FAILED = "LOGIN_FAILED";

const initialState = { authenticated: false, loading: false };

export default function (state = initialState, action) {
    switch (action.type) {
        case LOGIN_REQUEST:
            return { ...state, loading: true };
        case LOGIN_SUCCESS:
            return { ...state, loading: false, authenticated: true, user: action.payload };
        case LOGIN_FAILED:
            return { ...state, loading: false, };
        default:
            return { ...state }
    }
}

export function loginRequest(loginData) {
    return { type: LOGIN_REQUEST, loginData }
}

export function loginApi(formData) {
    return new Promise((resolve, reject) => {
        request.post('/login', formData)
            .then(response => {
                resolve(response)
            })
            .catch(error => reject(error));
    })
}

export function* handleLogin(formData) {
    try {
        console.log('handleLogin');
        const payload = yield call(loginApi, formData);

        console.log(payload)

    } catch (e) {
        console.log('error ', e);
    }
}

export function* watchLoginRequest() {
    yield take(LOGIN_REQUEST, handleLogin);
}

//ROOTSAGA.js
import { all } from 'redux-saga/effects';
import { watchLoginRequest } from './modules/auth/reducer';

export default function* Root() {
    yield all([
        watchLoginRequest,
    ])
}

//store.js
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../rootReducer';
import rootSaga from '../rootSagas';
const history = createHistory();

const sagaMiddleware = createSagaMiddleware();

const middlewares = [
    sagaMiddleware,
    thunk,
    routerMiddleware(history),
];

/* eslint-disable no-underscore-dangle */
const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(...middlewares)));
/* eslint-enable */

sagaMiddleware.run(rootSaga);

export default store;

当我提交表单时，它将执行loginRequest函数。我已经检查过它是否成功执行了。

问题是import { Button, Form, Icon, Input, Row } from 'antd'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { config } from '../../../utils'; import { loginRequest } from '../reducer'; import { Div, DivLogo } from '../styles'; const FormItem = Form.Item; const formDecorator = Form.create(); const reduxConnect = connect(null, { loginRequest }); class Login extends Component { static propTypes = {}; static defaultProps = {}; handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log(values); this.props.loginRequest(values); } }); }; render() { const { getFieldDecorator } = this.props.form; return ( <Div> <DivLogo> <span>{config.logoText}</span> </DivLogo> <Form onSubmit={this.handleSubmit}> <FormItem hasFeedback> {getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username' }], })( <Input size="large" prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />, )} </FormItem> <FormItem hasFeedback> {getFieldDecorator('password', { rules: [{ required: true, message: 'Please input your Password' }], })( <Input type="password" size="large" prefix={<Icon type="lock" style={{ fontSize: 13 }} />} placeholder="Password" />, )} </FormItem> <Row> <Button type='primary' htmlType="submit" size='large' loading={false}> Login </Button> </Row> </Form> </Div> ); } } export default reduxConnect(formDecorator(Login));永远不会运行。它永远不会进入watchLoginRequest函数。 console.log从未在控制台上显示。

任何解决方案？

Answer 1

在您的示例中，没有＆＃34;实时流程＆＃34;电路和源代码可以简化。因此，您的代码段仅捕获具有特定类型的事件并调用回调。效果takeEvery是此代码段的默认用例

export function handleLogin() {
    // Your definitive saga
}
// .....
export default function* Root() {
    yield [takeEvery(LOGIN_REQUEST, handleLogin)]
}

更重要的是，不要混合传奇处理程序和减速机。如果要从saga调用某个reducer，只需将操作名称分隔为REQUEST / RESPONSE格式，然后捕获所有*_REQUEST个事件并将*_RESPONSE放在Process Manager（saga）之后工人结束。

React Redux Saga函数永远不会被执行

1 个答案: