Redux Saga не запускается / API не вызывается - реквизит не определен

Question

Я изучаю Redx-сагу и у меня проблема с вызовом API.Кажется, что моя сага не запущена, и мои реквизиты остаются неопределенными.
Я использую поддельный сервер для насмешки данных.Я протестировал сервер, и, похоже, он отлично работает вне саги.

Мой код выглядит так:

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

Похоже на userRequestFlowфункция вообще не вызывается.
Я уверен, что это просто глупая ошибка новичка, но я просто не могу понять это.
Что я делаю не так?

Answer 1

В вашем user.js вам нужно определить mapDispatchToProps () и отправить действие showUserRequest следующим образом:

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

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

А затем вызовите this.props.dispatchUserRequest (), если вы хотите отправить действие.