Redux Saga not triggered/api not called - props undefined

Question

I'm learning redux-saga and having a problem with calling my api. It seems like my saga is not triggered and my props stay undefined.
I'm using fake-server for mocking data. I tested the server and it seems to be working fine outside the saga.

My code looks like this:

UserView.js

const UserView = (props)  => {
const {user} = props;
return (
            <Header as='h2'>{user.name}</Header>
 );
}

export default UserView

actions.js

export function showUserRequest(){
    return{
        type: USER_REQUEST
    }
}

export function showUserSuccess(user) {
    return {
        type: USER_SUCCESS,
        payload: user
    }
}

export function showUserError(error){
    return{
        type: USER_ERROR,
        payload: error
    }
}

reducer.js

export default function (state = initialState, action) {
switch(action.type){
    case USER_REQUEST:
        return{
            ...state,
            requesting: true,
            successful: false,
            errors: []
        }
    case USER_SUCCESS:
        return{
            ...state,
            user: action.payload,
            requesting: false,
            successful: true,
            errors: [],
        }
    case USER_ERROR:
        return{
            requesting: false,
            successful: false,
            errors: state.errors.concat[{
                body: action.error.toString(),
                time: new Date(),
            }],
        }
        default:
            return state;
    }
}

user.js

class User extends Component {

constructor(props) {
    super(props);
    this.fetchUser = this.fetchUser.bind(this);
}

componentWillMount(){
    this.fetchUser();
}

fetchUser(){
    const { showUserRequest } = this.props;
    return showUserRequest;
}

render() {
    const user = this.props;
    return (<UserView user = {user.user}/>);
 }
}

function mapStateToProps(state) {
    return {
        user: state.user
    };
 }

export default connect(mapStateToProps, {showUserRequest})(User);

sagas.js

const api = 'http://localhost:8080/user';

function userRequestApi () {
    return axios.get(api)
}


function* userRequestFlow() {                       //does not seem to get invoked
    try {
        const user = yield call(userRequestApi);
        yield put(showUserSuccess(user))
    } catch (error) {
        yield put(showUserError(error))
    }
}

function* userWatcher() {                            //seems to get invoked
    yield takeLatest(USER_REQUEST, userRequestFlow);
}

export default userWatcher

indexSaga.js/indexReducer.js

export default function* IndexSaga() {
yield all([
    SignupSaga(),
    LoginSaga(),
    UserSaga()
  ]);
}

const IndexReducer = combineReducers({
    route: routerReducer,
    form: formReducer,
    user: userReducer
})

export default IndexReducer

It seems like the userRequestFlow function is not called at all.
I'm sure it's just a silly rookie mistake but I just can't figure it out.
What am I doing wrong?

Answer 1

In your user.js you need to define mapDispatchToProps() and dispatch the showUserRequest action like this:

     function mapDispatchToProps(dispatch) {
      return {
        dispatchUserRequest: () => dispatch(showUserRequest()),
      };
    }

    export default connect(mapStateToProps, mapDispatchToProps)(User);

And then invoke this.props.dispatchUserRequest() when you wish to dispatch the action.