наблюдатель саги не наблюдает за отправленными действиями - PullRequest
Новая
       59

наблюдатель саги не наблюдает за отправленными действиями

0 голосов
/ 25 сентября 2018

При отправке действия LOGIN_CALLED один из редукторов, который прослушивает это действие, работает нормально.Но watga 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
    }
}

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;

Компонент 

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

реакция: 16,2,0
реакция нативная: 0,52.0
реаги-редукс: 5,0,7
редукс: 4,0,0
избыточный-постоянный: 5,10,0
redux-saga: 0.16.0

1 Ответ

0 голосов
/ 25 сентября 2018

Вам необходимо предоставить саги Provider. 

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

Редактировать: Выше не требуется вообще, игнорируйте его.Но я создал минимальный пример из вашего кода, и похоже, что если вы измените свою rootSaga на следующую, она отлично работает. 

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

Не знаю почему, но я изучаю ее документацию.Обновил бы, если нашел что-нибудь.

...