首页 文章

传奇守望者没有看到被派遣的行动

提问于
浏览
0

在调度动作时 LOGIN_CALLED 正在听这个动作的减速器之一工作正常 . 但 watcher saga 没有触发 watcherLogin()

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

Store Creation

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
    }
}

auth saga

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    
        })
    }
}

Watcher saga

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;

Component

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.7
redux: 4.0.0
redux-persist: 5.10.0
redux-saga: 0.16.0

1 回答

  • 0

    你需要提供sagas到 Provider .

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

    Edit: 上面没有必要,忽略它 . 但是我从你的代码中创建了一个最小的例子,如果你将rootSaga更改为以下内容,它看起来很好 .

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

    不知道为什么,但我正在研究它的文档 . 如果找到任何东西会更新 .

相关问题