redux的用法

62 阅读2分钟

Redux是一个JavaScript状态管理库,主要用于管理应用的状态并确保状态的一致性和可预测性。 Redux采用[单一数据源]的概念,即整个应用的状态被存储在一个JavaScript对象树中,通过一个统一的“store”管理,应用的状态只能通过触发“action”来改变, 所有的状态更新逻辑都放在【reducer】函数中。Redux的核心思想是【单向数据流】,使得应用的状态变化更加可控和可预测。

1.2Redux主要概念 【Store】:Redux中的状态存储中心,包含整个应用的状态。 【Action】:描述状态改变的对象,通常是一个包含类型(type)和数据(payload)的对象。 【Reducer】:纯函数,接收当前状态和action,返回新的状态。 【Dispatch】:用于触发actions,从而让state发生变化。 1.3使用方式

2.1Redux Toolkit作用 Redux Toolkit是官方推荐的Redux开发工具集,它封装了Redux的常用功能,并提供了简化的API,旨在减少 开发者编写样板代码的负担,提供更好的开发体验。Redux Toolkit集成了redux-thunk中间件,内置了不可变 数据结构支持,并且提供了易用的开发工具。 2.2Redux Toolkit主要特性 【简化创建Store】:通过configureStore()自动配置Redux store和中间件。 【简化Redux和Action】:通过createSlice()自动生成action和reducer。 【内置Redux Thunk】:默认集成了异步处理的支持。 【Immutable数据更新】:通过immer库,允许以可变方式编写reducer

官方建议安装两个插件 - Redux Toolkit 和 React-Redux 1.Redux Toolkit(RTK): 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式 2.React-Redux:用来链接Redux和React组件的中间件 3.安装方式:npm install @reduxjs/tookit react-redux

//createSlice返回一个包含以下属性的对象: 。name:slice的名称 。reducer:一个reducer函数,用来处理来自action creators的动作并更新状态。 。actions:一组action creators,用于创建派发给reducer的动作。