CODEWITHSUNDEEP
reduxreact-reduxredux-saga
Simon Nonnis
Simon Nonnis

Reputation: 17

How to use redux-saga with redux and react-redux

I am trying to understand how redux-saga works, implementing a simple example (a button that when clicked fetch a user from an API and then the reducer adds this user to the store) with react, redux and react-redux.

Here is my saga (with console.logs for debugging):

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

Unfortunately when I click the "Get user" button nothing happens:

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

Here the whole repo: link to repo on GitHub

Upvotes: 1

Views: 386

Answers (1)

MadNat
MadNat

Reputation: 349

Your problem has nothing to do with sagas. Your code is missing "a glue" between redux and react in the form of mapStateToProps and mapDispatchToProps. Note that in App.js you are using Button component without props that is required for it to trigger a GET_USER action. Please take a look at this redux documentation page.

Upvotes: 1

Related Questions