1

嘿，所以我想从 react-saga 的请求中获取 json ！我想知道如何获取我的 saga 产生的数据，我有一个想法在 componentWillMount 中调用生成器函数，该函数使用 takeLatest 监视“REQUEST_DONE”操作，然后重新渲染。

但我认为在我的一个组件中使用 react-saga 是个坏主意。请指导

我的传奇文件：

export function* Saga() {
  yield fetch(url, {
    method: 'GET',
    headers: {
      'Accept': '...',
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    return response.json();
  })
  .then(json => {
    return json;
  })
  .catch(ex => {
    console.log('parsing failed', ex)
  })
}

export default function* watchAsync() {
  console.log(yield Saga().next().value); // gets the value correctly
  yield* takeLatest('BLAH', Saga);
}

我的组件

...
componentWillMount() {
    const { store } = this.context;
    store.dispatch({type: 'BLAH'});
    // I want the request data
  }

  render() { ... }
4

1 回答 1

3

编辑 webpackbin 演示

调用 fetch 并产生结果

import { take, put, call } from 'redux-saga/effects';

function fetchData() {
    return  fetch(url)
    .then(res => res.json() )
    .then(data => ({ data }) )
    .catch(ex => {
        console.log('parsing failed', ex);
        return ({ ex });
    });
}

function* yourSaga(action) {
    const { data, ex } = yield call(fetchData);
    if (data)
    yield put({ type: 'REQUEST_DONE', data });
    else
    yield put({ type: 'REQUEST_FAILED', ex });
}
export default function* watchAsync() {
    yield* takeLatest('BLAH', yourSaga);
}

然后连接组件并切片所需的数据

class App extends Component {
    ...
    componentWillMount() {
        this.props.dispatch({type: 'BLAH'});
    }

    render(){
        return (<div>Data: {this.props.data}</div>);
    }
}

export default connect( state =>({
    data:state.data
}))(App);
于 2016-07-27T17:11:52.173 回答