Как назвать саги по порядку на компоненте? - PullRequest
Новая
       10

Как назвать саги по порядку на компоненте?

0 голосов
/ 14 мая 2018

проблема

Я хочу позвонить func(), когда нажимаю кнопку increase_number and decrease_number, но я не знаю, как это сделать.

МожетЯ делаю это?(Увеличивается число, а затем уменьшается.)

Или я должен создать новое действие и сагу?

Спасибо за чтение!

исходный код

Redux (с сагами) 

import { createAction, handleActions } from 'redux-actions';
import { delay } from 'redux-saga';
import { all, put, select, takeEvery } from 'redux-saga/effects';

export const action_creators = {
    increase_number: createAction('increase_number'),
    decrease_number: createAction('decrease_number'),
    set_number_success: createAction('set_number_success')
};

const state = {
    number: 0
}

function* increase_number () {
    const state = yield select((state) => state);
    yield delay(1000);
    yield put(action_creators.set_number_success({ number:++state.number }));
}

function* decrease_number() {
    const state = yield select((state) => state);
    yield put(action_creators.set_number_success({ number:--state.number }));
}

export function* saga() {
    yield all([
        takeEvery('increase_number', increase_number),
        takeEvery('decrease_number', decrease_number)
    ]);
}

export default handleActions({
    set_number_success: (state, action) => {
        const new_number = action.payload.number;
        console.log(new_number);
        return { ...state, number:new_number };
    }
}, state);

Компонент 

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { put, take } from 'redux-saga/effects';
import { action_creators } from './redux';

function* func () {
    yield put(action_creators.increase_number());
    yield take(action_creators.set_number_success());
    yield put(action_creators.decrease_number());
}

class App extends React.PureComponent {
    render() {
        return [
            <div>{this.props.number}</div>,
            <button type="button" onClick={() => this.props.increase_number()}>increase_number</button>,
            <button type="button" onClick={() => this.props.decrease_number()}>decrease_number</button>,
            <button type="button">increase_number and decrease_number</button> <= Here.
        ]
    }
}

function map_state_to_props(state) {
    return {
        number: state.number
    }
}

function map_dispatch_to_props(dispatch) {
    return bindActionCreators({
        increase_number: action_creators.increase_number,
        decrease_number: action_creators.decrease_number
    }, dispatch);
}

export default connect(map_state_to_props, map_dispatch_to_props)(App);

URL для теста

1 Ответ

0 голосов
/ 15 мая 2018

Прежде всего ваш func должен быть в саге, а не в компоненте, так как это сага.

Во-вторых, да, вам нужно отдельное действие, поскольку это отдельный побочный эффект, который сочетает в себе 2 других побочных эффекта, но все же.

Этого проще всего добиться, добавив еще один takeEvery(): 

...

function* increase_and_decrease() {
  yield call(increase);
  yield call(decrease);
}


export function* saga() {
  yield all([
    takeEvery('increase_number', increase_number),
    takeEvery('decrease_number', decrease_number),
    takeEvery('incerase_and_decrease', increase_and_decrease);
  ]);
}

А остальное - перенести новое действие в вашем компоненте в mapDispatchToProps и вызвать нажатие кнопки.

...