代码之家 › 专栏 › 技术社区 › realtebo

redux thunk和异步/等待操作:如何将它们结合起来?

redux-thunk async-await react-native reactjs

realtebo · 技术社区 · 8 年前

下面的代码是我的一个动作,实际上很有效。

export const loadChannelList = () => { 
    return async (dispatch) => {

        dispatch ({
            type: CHANNEL_LIST_LOADING
        });

        try {
            const response  = await fetch('<my server url>');
            const responseJson = await response.json();

            dispatch ({
                type: CHANNEL_LIST_LOADING_OK,
                payload: "ok" // response.json()
            });

        } catch(error) {
            dispatch ({
                type: CHANNEL_LIST_LOADING_FAILED,
                payload: error
            });
        }
    };
}

在组件中,我这样使用它:

componentWillReceiveProps(nextProps) {
        if (this.props.connectionStatus != 'ok' 
            && nextProps.connectionStatus == 'ok'
           ) {
            this.props.loadChannelList();
        }
}

我问你: 在使用redux thunk时,这是使用async/await的正确方法吗?

我这样问是因为这是我第一次在redux thunk操作中在react本机应用程序中使用async/await,我想确保我没有出现反模式或其他错误

1 回复 | 直到 8 年前

Brett DeWoody 8 年前

你不应该需要 await 日期:

const response  = await fetch('<my server url>');

仅在以下情况下需要:

const responseJson = await response.json();

这是因为 fetch Promise . 所以 等候 只需要 等候 结果 许诺 .

下面是一个使用一些模拟函数的简化示例:

// A fake asynchronous request
function fetch(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: x
      });
    }, 3000);
  });
}

// A fake Dispatch function
function fakeDispatch(theData) {
  console.log(theData);
}

// A function to run on componentDidMount or similar
async function getData(x) {
  const response = fetch(x);
  
  // call the Dispatch
  fakeDispatch(await response);
}

// componentDidMount
console.log('Mounting component...');
getData("some data");

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前