Redux-Thunk 的真谛：一探究竟

若您使用 Redux，大概率也会使用 Redux-Thunk 库。然而， برخ于作者的观点，我们不妨从另一个角度剖析其内涵。

求值策略的启示

编程语言发展伊始，计算机科学家在编译器设计中争论不休，焦点集中在“求值策略”上。例如：

function bar(a) { return 1; }

在此函数中，bar 函数体中并未用到 a 参数。因此，按值调用可能会造成性能浪费，因为参数计算变得毫无必要。

Redux-Thunk：延迟求值的艺术

Redux-Thunk 的作用类似于“惰性求值”策略。它允许在 Redux action 中返回函数，而非直接返回 action 对象。这些函数被称为“thunk”，可以通过额外的参数（称为“dispatch”和“getState”）访问 Redux store。

因此，Redux-Thunk 赋予开发者在 dispatch action 之前动态计算和修改 action 数据的灵活性。这一特性在以下场景中尤为有用：

• 执行异步操作，例如 HTTP 请求
• 访问 Redux store 并基于其状态修改 action
• 使用额外的函数式工具增强 action 的可重用性和测试性

打破常规：摆脱直接映射

作者认为 Redux-Thunk 仅仅是 action creator 的变体，此说法略显片面。虽然 Redux-Thunk 可以用于创建 action，但它更为强大的能力在于延迟求值。这使开发者能够脱离 action 和 reducer 之间的直接映射关系，赋予更灵活和富有表现力的编程模式。

巧用异步：释放并发潜能

在 Redux-Thunk 的加持下，异步操作可以毫不费力地融入 Redux 流程。例如，我们可以通过以下 thunk 派发 HTTP 请求：

const fetchPosts = () => dispatch => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(posts => dispatch({ type: 'FETCH_POSTS', payload: posts }))
    .catch(error => dispatch({ type: 'FETCH_POSTS_ERROR', payload: error }));
};

结语

Redux-Thunk 的意义并非局限于替代 action creator。它引入了一种延迟求值机制，赋予 Redux 更强大的灵活性、可测试性和异步处理能力。通过打破常规的直接映射关系，Redux-Thunk 为开发者提供了更为丰富多样的编程模式，使他们能够构建更具创造性和可维护性的 Redux 应用程序。

---