Question

对于React / Redux来说是全新的，并且对创建组件的所有不同方法感到非常困惑。我已经阅读了Redux的async docs并设法在页面加载时加载异步数据，但现在我想要使用按钮触发数据下载。

到目前为止，我在render函数中有一个组件。

<button onClick={() => dispatch(getEntry('dummy'))}> Get some data< /button>

这是我的行动创作者

export function getEntry(apiroute) {
  return {
    type: GET_ENTRY,
    apiroute
  };
}

并且redux将此传递给我的reducer

export function entry(state = initialState, action) {
  switch (action.type) {
  case 'GET_ENTRY':
    return Object.assign({}, state, {
      fetching : true
    });

我可以在日志中看到状态正在被动作改变。

在我的操作文件中，我有这个代码，如果我将其连接到我的应用程序的引导程序，我知道这个代码可以工作。

export function fetchEntry() {
  return function(dispatch) {
    return window.fetch('/google.json')
      .then(response => response.json())
      .then(json => dispatch(recEntry(json)));    
  }
}

但是，按钮点击后，我应该在上面的序列中调用fetchEntry的位置和方式？

Answer 1

执行异步的惯用方法是使用redux-thunk或redux-promise之类的内容。 redux-thunk我认为更常见。您在fetchEntry函数中使用了thunk模式，但我不认为是惯用的。从顶部：

您的按钮代码看起来不错。

您的getEntry动作创建者有点用词不当。您将其更多地用作initiateGetEntry，对吧？

使用redux-thunk，您将两个动作创建者组合成一个thunk动作创建者：

export function getEntry() {
  return function(dispatch) {
    dispatch({ type: 'GET_ENTRY_INITIATE' });
    fetch('google.json)
      .then(function(res) { dispatch({ type: 'GET_ENTRY_SUCCESS, payload: res }) }
      .catch(function(res) { dispatch({ type: 'GET_ENTRY_FAIL' });
  } 
}

减速器与你的相似：

export function entry(state = initialState, action) {
  switch (action.type) {
  case 'GET_ENTRY_INITIATE':
    return Object.assign({}, state, { fetching : true });
  case 'GET_ENTRY_SUCCESS':
    return Object.assign({}, state, action.payload, { fetching: false });
  case 'GET_ENTRY_FAIL':
    return Object.assign({}, state, { fetching: false, error: 'Some error' });
  default:
    return state;
}

然后，您的UI代码正常工作：

<button onClick={() => dispatch(getEntry('dummy'))}> Get some data< /button>

Answer 2

好的，不确定这是否是唯一的方法，但这在我的Component

中有效

constructor(props) {
    super(props);
    this.getdata = this.getdata.bind(this);
}

getdata(evt) {
    const { dispatch } = this.props;
    dispatch(getEntry('getdata'));
    fetchEntry()(dispatch);
}

render() {
    return (
        <div>
            <button onClick={this.getdata}> Get some data2</button>

基本上我向商店发送一条消息，表示正在开始更新，然后开始更新。

欢迎确认这是一种惯用模式。

Redux：在React视图事件上触发异步数据获取

2 个答案: