Redux saga worker 没有被调用

Question

我不知道为什么，一个传奇工人没有被召唤。

在 sagas/login.js 中是 login worker，我在 actions/profile.js 中调用另一个动作 getProfile。

yield put({ type: ActionTypes.LOGIN_SUCCEEDED, address: account.address }); 被调用，getProfile 动作也被调用，但 sagas/profile.js 中的getProfile 未被调用。

Home.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import login from 'actions/login';

class Home extends Component {
  static propTypes = {
    login: PropTypes.func,
  };

  static defaultProps = {
    login: () => null,
  };

  submit = (e) => {
    e.preventDefault();
    this.props.login(this.key.value);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <div className="input-group">
            <input
              type="password"
              className="form-control"
              ref={el => (this.key = el)}
            />
            <button type="submit" className="btn btn-primary">
              Login
            </button>
          </div>
        </form>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  login: key => dispatch(login(key)),
});

export default connect(
  null,
  mapDispatchToProps,
)(Home);

actions/login.js

import * as ActionTypes from '../constants/actionTypes';

const login = key => ({
  type: ActionTypes.LOGIN_REQUESTED,
  key,
});

export default login;

actions/profile.js

import * as ActionTypes from '../constants/actionTypes';

const getProfile = id => ({
  type: ActionTypes.PROFILE_REQUESTED,
  id,
});

export default getProfile;

sagas/index.js

import { all, fork } from 'redux-saga/effects';
import watchLogin from './login';
import watchProfile from './balance';

export default function* rootSaga() {
  yield all([
    fork(watchLogin),
    fork(watchProfile),
  ]);
}

sagas/login.js

import { fork, put, takeLatest } from 'redux-saga/effects';
import { wallet } from '@cityofzion/neon-js';
import getProfile from 'actions/profile';
import * as ActionTypes from '../constants/actionTypes';

function* login(action) {
  const { key } = action;
  try {
    const account = new wallet.Account(key);
    yield call(getProfile, account.id);
    yield put({ type: ActionTypes.LOGIN_SUCCEEDED, address: account.address });
  } catch (error) {
    yield put({ type: ActionTypes.LOGIN_FAILED, message: error.message });
  }
}

export default function* watchLogin() {
  yield takeLatest(ActionTypes.LOGIN_REQUESTED, login);
}

sagas/profile.js

import { call, put, takeLatest } from 'redux-saga/effects';
import { api, wallet } from '@cityofzion/neon-js';
import * as ActionTypes from '../constants/actionTypes';

function* getProfile(action) {
  const { id } = action;
  try {
    const profile = yield call(
    get,
    id,
  );
    yield put({ type: ActionTypes.PROFILE_SUCCEEDED, profile });
  } catch (error) {
    yield put({ type: ActionTypes.PROFILE_FAILED, message: error.message });
  }
}

export default function* watchProfile() {
  yield takeLatest(ActionTypes.PROFILE_REQUESTED, getProfile);
}

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import App from 'components/App';
import reducers from 'state/index';
import sagas from 'sagas/index';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  combineReducers({
    ...reducers,
  }),
  composeWithDevTools(applyMiddleware(
    sagaMiddleware,
  )),
);

sagaMiddleware.run(sagas);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app'),
);

package.json

"dependencies": {
    "@cityofzion/neon-js": "^3.8.1",
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-slidedown": "^1.3.0",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
  },

Answer 1

您需要在while(true) 中包含您的*watch sagas

export default function* watchProfile() {
  while(true) {
    yield takeLatest(ActionTypes.PROFILE_REQUESTED, getProfile);
  }
}

Answer 2

我需要使用yield put，而不是yield call。

我将yield call(getProfile, account.id); 更改为yield put(getProfile, account.id);，现在它可以工作了。