前端开发中,管理和维护应用状态一直是一个难题。为了更好地解决这个问题,React 开发团队于 2015 年发布了 Redux,它是一个单向数据流的 JavaScript 应用状态管理库。在 Redux 中,所有状态的更改都是通过发送 action,并被 reducer 处理,再反映到应用的状态中。Redux 比其他状态管理库更具有可预测性,可扩展性和可维护性。在本篇文章中,我们将讨论 Redux 的基本概念和工作流程。
Redux 的基本概念
Store
Store 是 Redux 的核心概念之一,它是应用状态的唯一来源。Store 存储了整个应用的状态,并提供了一些用于获取、更新状态的方法。
下面演示了如何创建一个简单的 store:
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ----- ------------ - - ------ - - -- ---- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - - ---- ------------ ------ - ------ ----------- - - - -------- ------ ----- - - ----- ----- - --------------------
在以上代码中,创建了一个初始状态为 { count: 0 } 的 reducer 并在创建 store 时传入。我们可以通过调用 store.getState() 来获取当前状态,通过 store.dispatch(action) 来派发 action 以触发状态更新。当有状态更新时,store 会自动调用我们的 reducer 函数,并将当前 state 和 action 传入 reducer 中。
Action
Action 是用来描述状态变化的一种对象,它需要包含一个 type 字段来指定变化的类型,同时还可以包含其他一些相关的数据。
const incrementAction = { type: 'INCREMENT' } // 增加 const decrementAction = { type: 'DECREMENT' } // 减少
Reducer
Reducer 是一个纯函数,用来处理各种 action 的状态变化,它接收当前状态和 action 作为参数,并返回新的状态。
-- -------------------- ---- ------- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - - ---- ------------ ------ - ------ ----------- - - - -------- ------ ----- - -
在上面的代码中,我们可以看到 reducer 中包含了两个 action 类型,当 action 的 type 为 'INCREMENT' 时,state.count + 1,当 action 的 type 为 'DECREMENT' 时,state.count - 1。
Redux 的工作流程
以上是 Redux 的工作流程图。在 Redux 应用中,数据流是单向的,从上往下流动。
用户触发某一个操作,调用 store.dispatch(action) 方法,将 Action 发送给 Store。
store.dispatch({ type: 'INCREMENT' })
Store 接收到 Action,将 Action 和当前的状态 state 一起发送给 Reducer。
const newState = reducer(state, action)
Reducer 接收到 Action 和 state,根据 Action 的 type 执行相应的操作,并返回一个新的 state。
-- -------------------- ---- ------- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - - ---- ------------ ------ - ------ ----------- - - - -------- ------ ----- - -
Store 接收到新的 state,并将其更新。
UI 组件监听到 store.subscribe() 的变化,重新渲染新的界面。
store.subscribe(() => { const state = store.getState() console.log(state) // { count: 1 } })
总结
在本篇文章中,我们简要介绍了 Redux 的基本概念和工作流程。Redux 包含了 Store、Action 和 Reducer 三个核心概念。Store 是应用状态的唯一来源,Action 用来描述状态变化,Reducer 是一个纯函数,用来处理各种 Action 的状态变化。Redux 通过单向数据流的方式更好地实现应用状态的管理和维护。掌握 Redux 的基本概念,可以帮助我们更好地开发出更加健壮和复杂的高质量应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65214c0295b1f8cacd8d01da