如何将 redux-saga 与 redux 和 react-redux 一起使用

Question

我试图了解 redux-saga 的工作原理，使用 react、redux 和 react-redux 实现一个简单的示例（单击时从 API 获取用户然后reducer 将此用户添加到商店的按钮）。

这是我的传奇（使用 console.logs 进行调试）：

import { take, call, put }  from 'redux-saga/effects';

import { GET_USER, setUser } from './actions/actionCreators';

export default function * watchFetchUser () {
  console.log('Inside saga');
  yield take(GET_USER);
  console.log('Received click');
  const URL = 'http://uinames.com/api/?ext';
  const user = yield call(fetch, URL);
  const userToJson = yield user.json();
  yield  put(setUser(userToJson))
}

不幸的是，当我单击“获取用户”按钮时，没有任何反应：

import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';

import styles from './Button.css';

const Button = ({ getUser }) => {
  function handleClick() {
    getUser
    console.log('Clicked');
  }

  return (
    <button
      type='text'
      styleName='button'
      onClick={handleClick}
    >Get User</button>
  )
}


Button.propTypes = {
  getUser: PropTypes.func
}

export default CSSModules(Button, styles, { allowMultiple: true });

这里是整个仓库： link to repo on GitHub

Answer 1

您的问题与 sagas 无关。您的代码在 redux 之间缺少“粘合剂”，并以 mapStateToProps 和 mapDispatchToProps 的形式做出反应。请注意，在App.js 中，您使用的Button 组件没有触发GET_USER 操作所需的道具。请查看此redux documentation 页面。