S
S
SecDet2018-07-05 23:28:55
React
SecDet, 2018-07-05 23:28:55

Confused in redux-saga, how to properly dispatch and process with a reducer (asynchronous request)?

I didn’t understand a little with asynchronous request dispatchers in saga. The work, as I understand it, is similar to the async / await structure.
Here is the code where all my mentions of the store are:
The Store itself

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;

My 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;

So, and here is the search line , from which everything dances (by pressing):
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 the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Spirin, 2018-07-06
@SecDet

You pass a string to the call to call, and it takes a function as its first argument: subsequent
arguments are passed to the call to fn .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question