Как выбрать после того, как положить в сагу? - PullRequest
Новая
       13

Как выбрать после того, как положить в сагу?

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

Компонент 

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { action_creators } from './redux';

class App extends React.PureComponent {
    render() {
        return [
            <div>{this.props.number}</div>,
            <button type="button" onClick={() => this.props.set_number_async({ number:10 })}>increase_number_async</button>
        ]
    }
}

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

function map_dispatch_to_props(dispatch) {
    return bindActionCreators({
        set_number_async: action_creators.get_action_of_set_number_async
    }, dispatch);
}

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

Redux 

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

export const action_creators = {
    get_action_of_set_number: createAction<{ number:number }>('set_number'),
    get_action_of_set_number_async: createAction<{ number:number }>('set_number_async'),
    get_action_of_set_number_async2: createAction<{ number: number }>('set_number_async2')
};

const state = {
    number: 0
}

function* set_number_async(action: Action<{ number:number }>) {
    let state = yield select((state) => state.number);

    console.log('first', state); // 0

    yield delay(1000);
    yield put(action_creators.get_action_of_set_number_async2(action.payload!));

    state = yield select((state) => state.number);

    console.log('second', state); // 0
}

function* set_number_async2(action: Action<{ number: number }>) {
    yield put(action_creators.get_action_of_set_number(action.payload!));
}

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

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

пример

Я ожидал, что 10 будет напечатано вторым console.log (), когда я нажму кнопку, но 0 было напечатано.

Что я делал? Я пытался найти это в учебнике, но у меня не было решения.

Я хочу знать, как повторно выбрать новое отправленное состояние.

пожалуйста, не могли бы вы мне помочь? Спасибо за чтение. :)

...