Question

我试图理解redux-saga是如何工作的，实现一个简单的例子（一个按钮，当点击从API获取用户，然后reducer将此用户添加到商店）with react，redux和react-redux。

这是我的传奇（使用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

你的问题与传奇无关。你的代码丢失了＃34;胶水＆＃34;在redux之间以mapStateToProps和mapDispatchToProps的形式反应。请注意，在App.js中，您使用的Button组件没有引发GET_USER操作所需的道具。请查看此redux documentation页面。

如何使用redux-saga与redux和react-redux

1 个答案: