saga watcher 没有看到发送的动作

Question

在调度动作 LOGIN_CALLED 时，正在侦听此动作的减速器之一工作正常。但是 watcher saga 没有触发 watcherLogin()

我在 watcherLogin() 中设置了断点，但它们永远不会被调用。此外，这里 createStore(persistedReducer, applyMiddleware(Logger, sagaMiddleware)) 每次触发任何操作时都会调用 Logger。

商店创建

import { createStore, applyMiddleware, combineReducers } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage';

import { Logger } from '../middlewares';
import rootSaga from '../sagas';

import { errorReducer } from './error.reducer';
import appReducer from './app';
import uiReducer from './ui'


const persistConfig = {
    key: 'root',
    storage: storage,
    whitelist: [ 'app' ]
}

const reducers = combineReducers ({
    app: appReducer,
    ui: uiReducer,
    error: errorReducer
})

const sagaMiddleware = createSagaMiddleware()

const persistedReducer = persistReducer(persistConfig, reducers)

export default config = () => {
    let store = createStore(persistedReducer, applyMiddleware(Logger, sagaMiddleware))
    let persistor = persistStore(store)
    sagaMiddleware.run(rootSaga);
    return {
      store,
      persistor
    }
}

授权传奇

import { authAction } from '../actions';
import { postLogin } from '../http/auth.http.service';
import { formatHTTPResponse } from './util.saga';
import { takeLatest, call, put } from 'redux-saga/effects';

export function* watcherLogin() {
    return takeLatest(authAction.LOGIN_CALLED, workerLogin)
}

export function* workerLogin(action) {
    const authResponse = yield call(
        postLogin,
        action.payload
    );
    let formattedResponse = formatHTTPResponse(authResponse);

    if (authResponse.ok) {

        yield put({
            type: authAction.LOGIN_SUCCESS,
            payload: authPayload
        })
    } else {
        yield put({
            type: authAction.LOGIN_FAILURE,
            error: formattedResponse    
        })
    }
}

守望者传奇

import { all, fork } from 'redux-saga/effects';
import { watcherLogin } from './auth.saga';

export default function* rootSaga() {
    yield all([
        watcherLogin()
    ]);
}

App.js

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from "redux-persist/integration/react";
import config from './src/reducers';
import Authentication from './src/route/Authentication';

let { store, persistor } = config();

class App extends React.Component{
  render() {
    return (
      <Provider store={store} >
        <PersistGate loading={null} persistor={persistor}>
          <Authentication />
        </PersistGate>
      </Provider>
    );
  }
}

export default App;

组件

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';

import { authAction } from '../actions/index.js';

class Login extends React.Component {
    constructor(props, context) {
        super(props);
    }

    Login(event) {
        this.props.postLogin({
            body: {
                email: 'xyz@gmail.com',
                password: 'password'
            }
        })
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.Login.bind(this)} style={{ backgroundColor: '#75C35D' }}>
                    <Text style={{ color: '#fff' }}>SIGN IN</Text>
                </TouchableOpacity>        
            </View>
        );
    }
}

const mapStateToProps = (state) => ({
    // some lines of code here
})

const mapDispatchToProps = (dispatch) => ({
    postLogin: payload => dispatch({type: authAction.LOGIN_CALLED, payload})
})


export default connect(mapStateToProps, mapDispatchToProps)(Login);

react：16.2.0
react-native：0.52.0
react-redux：5.0.7redux：4.0.0
redux-persist：5.10.0
redux-saga：0.16.0

Answer 1

您需要将 sagas 提供给Provider。

<Provider store={{...store, runSaga: sagaMiddleware.run(rootSaga)}}>

编辑：以上完全没有必要，忽略。但是我从您的代码中创建了一个最小的示例，看起来如果您将 rootSaga 更改为以下内容，它可以正常工作。

function* rootSaga() {
    yield [
        takeLatest(authAction.LOGIN_CALLED, workerLogin)
    ];
}

不知道为什么，但我正在研究它的文档。如有发现会更新。