酷代码 AI
菜单
服务商

作为javascript开发,简述如何redux 中的异步请求 ?

在Redux中处理异步请求,一般会使用中间件,例如Redux Thunk、Redux Saga、Redux Observable等。以下是一个使用Redux Thunk的例子: 首先,安装Redux Thunk: ```bash npm install redux-thunk ``` 然后,创建一个action creator来发起异步请求: ```javascript function fetchPosts() { return (dispatch) => { dispatch(requestPosts()); return fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(posts => dispatch(receivePosts(posts))) .catch(error => dispatch(requestPostsFailure(error))); }; } ``` 在这个例子中,`fetchPosts`是一个返回函数的函数,这个返回的函数接收一个`dispatch`函数作为参数。`dispatch`函数可以用来发送一个action。在`fetchPosts`函数中,我们首先发送一个`requestPosts`的action,然后发起一个fetch请求。当请求成功时,我们将接收到的JSON数据转换为一个新的action(`receivePosts`)并发送出去。如果请求失败,我们发送一个`requestPostsFailure`的action。 在你的reducer中处理这些action: ```javascript function posts(state = initialState, action) { switch (action.type) { case REQUEST_POSTS: return { ...state, loading: true }; case RECEIVE_POSTS: return { ...state, posts: action.payload, loading: false }; case REQUEST_POSTS_FAILURE: return { ...state, error: action.payload, loading: false }; default: return state; } } ``` 在这个reducer中,我们根据action的类型来更新状态。当接收到`REQUEST_POSTS` action时,我们设置`loading`为`true`。当接收到`RECEIVE_POSTS` action时,我们将`posts`和`loading`更新为新的值。当接收到`REQUEST_POSTS_FAILURE` action时,我们将`error`和`loading`更新为新的值。 [2023-11-09 01:43:25 | AI写代码神器 | 434点数解答]

相关提问
请收藏新域名:pdcd.cn
发财导航,免费问AI
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]