SecDet
@SecDet

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

Немного не допонял с диспатчами асинхронных запросов в 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);
  • Вопрос задан
  • 1894 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы