Запутался в redux-saga,как нужно правильно dispatch-ить и обрабатывать редьюсером(ассинхроный запрос)?

Question

[SecDet]

Немного не допонял с диспатчами асинхронных запросов в saga. Работа, как я понял похожа на структуру async/await.
Вот код, где все мои упоминания store-а :
Сам Store

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import saga from './sagas';

function images(state = [], action) {
    if(action.type === 'IMAGE_FETCH_SUCCEEDED') {
        return [
            ...state
        ];
    }
    return state;
}

const sagaMiddleWare = createSagaMiddleware();
const store = createStore(images, applyMiddleware(sagaMiddleWare));

sagaMiddleWare.run(saga);
export default store;

Моя Saga:

import { call, put, takeEvery } from 'redux-saga/effects';
import 'babel-polyfill';

function* fetchImages() {
    try {
        const image = yield call(`https://api.unsplash.com/search/photos?page=1&query=dog&client_id=your_token`);
        yield put ({type: 'IMAGE_FETCH_SUCCEEDED',state: image});
    } catch (e) {
        yield put ({type: 'IMAGE_FETCH_FAILED',message: e.message});
    }
}

function* mySaga() {
    yield takeEvery('IMAGE_FETCH_REQUESTED',fetchImages);
}

export default mySaga;

Так, а вот и поисковая строка, от которой всё пляшет(по нажатию):

import React from 'react';
import { Form, Input, Button } from './style.module.js';
import {connect} from 'react-redux';

class SearchBar extends React.Component {
    render() {
        return (
            <Form >
                <Input placeholder='Search'/>
                <Button type='button' onClick={this.handleClick.bind(this)}>GO</Button>
            </Form>
        )
    }

    handleClick() {
       //не уверен,что тут писать
    }
}

export default connect( //да и в таком способе,тоже не уверен
    dispatch => (
        {
            addImg: (/*здесь должно(наверное) лежать значение input*/) => {
                dispatch({type: 'IMAGE_FETCH_REQUESTED',payload:/*inputValue*/})
            }
        }
    )
)(SearchBar);

Answer 1

[Антон Спирин]

Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.

Comments

[SecDet]

Понял, а не подскажите про выброс action в моём searchbar ? Как правильно сделать?

[Антон Спирин]

SecDet, AC и типы лучше описывать в отдельных файлах и импортировать в компоненты:

export const IMAGE_FETCH_REQUESTED = 'IMAGE_FETCH_REQUESTED';

import { IMAGE_FETCH_REQUESTED } from './constraints/images';

export const searchImage = value => ({ type: IMAGE_FETCH_REQUESTED, payload: value });

import { searchImage } from '/actions/images'; 

class ExampleComponent extends React.Component {
  input = React.createRef();

  handleClick = e => {
      this.props.searchImage(this.input.value);
      this.input.value = '';
  };
   
  render() {
    return (
      <Form>
        <Input innerRef={this.input} placeholder='Search' />
        <Button type='button' onClick={this.handleClick}>GO</Button>
      </Form>
    );
  }
}

const mapDispatchToProps = {
  searchImage,
}

connect (null, mapDispatchToProps)(ExampleComponent);