Redux 是一个管理状态的强大库,并且与 React 结合使用效果更佳。我们可以轻易地将应用程序的状态存储在 Redux store 中,并在需要时调用。然而,在某些情况下,我们需要更多的控制权来处理业务逻辑,这时候我们可以使用 redux-thunk 中间件。
Redux Thunk 中间件
Redux Thunk 中间件是 Redux 的一个中间件,它允许我们将函数作为 action 调度。通常,action 是一个对象,其中包含有关事件的信息(例如 click 或 submit)。然后,Redux store 将此对象转发到 reducer 进行状态更改。而 redux-thunk 允许我们在调度时将函数作为参数传递并在需要时执行该函数。
安装和配置
在使用 redux-thunk 中间件之前,我们需要在我们的项目中安装该中间件。可以通过以下命令来安装:
npm i redux-thunk
然后,我们将在 Application 的 store 配置中将 redux-thunk 导入。在 Redux 中,这通常在 store.js 文件中完成。在那里,我们可以使用以下语法来获取中间件:
import { createStore, applyMiddleware } from "redux"; import thunkMiddleware from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunkMiddleware));
这行代码使用 applyMiddleware() 方法将 thunkMiddleware 与 Redux Store 配置一起使用。
简单示例
定义一个简单的 Redux action,它将直接派发一个 action 对象:
export const getPosts = () => { return { type: 'GET_POSTS' }; }
如果我们想在 action 调度前执行某些异步任务,如从 API 获取数据,则可以使用 Thunk 中间件。我们可以将此操作定义为一个函数,并在此函数中调用所需的 API:
-- -------------------- ---- ------- ------ ----- -------- - -- -- - ------ -------- -- - ----------------------- -------------- -- - ---------- ----- ------------ -------- ------------- --- --- -- --
在上面的代码中,我们首先引入 axios.js 库,对于这个例子,我们使用 axios 库来与 API 进行通信。然后,我们定义了一个函数,它将返回另一个函数。这个另一个函数接收一个 dispatch 函数,该函数负责更改 Redux Store 内容的第二个参数。在此之后,我们可以使用 axios 库发送 HTTP 请求,并使用该响应的结果更新 state。
给出建议
redux-thunk 相对于其他中间件可能有一点陈旧的味道,但它还是很有用的。它不是为新代码而设计的,但仍然在许多系统中得到广泛使用。使用 Redux Thunk,开发人员可以做出有意义的决定并提高代码的可读性。
结论
通过 redux-thunk 中间件,我们可以自定义函数并使用它们来管理 Redux Store 中的状态。在许多实际应用场景中,中间件允许开发人员对代码库进行大量增量更改。Redux Thunk 还使我们能够控制业务逻辑,尤其是在执行多个 HTTP 请求时,在我们的代码中包装所有异步操作非常方便。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67076e61d91dce0dc8686bf9