react-redux与@reduxjs/toolkit的使用,代码示例

2024-01-07 19:36:54

目录

什么是react-redux

为什么要使用react-redux

容器组件与UI组件

什么是@reduxjs/toolkit

为什么使用@reduxjs/toolkit

react-redux基本使用

下载

创建store

创建切片

入口文件配置

引入使用


什么是react-redux

React Redux是一个Redux库的React绑定版本,它提供了一种在React应用程序中使用Redux状态管理的方式。Redux是一个JavaScript状态容器,可管理不同组件之间的共享状态,以及应用程序的整体状态。React Redux提供了一组API和钩子,使得访问和更改Redux状态在React组件中更加容易和简单。

React Redux中的主要概念包括:

1. Provider组件:在应用程序的根组件中包裹Provider,它将store(Redux状态管理器)传递给React组件树中的所有组件。

2. connect函数:用于在React组件中通过映射Redux状态和操作到组件属性进行数据绑定。通过映射Redux状态到组件属性,您可以使组件访问所需的状态,而无需管理状态的访问,从而分离关注点,提高应用程序的可维护性和可重用性。

3. mapStateToProps和mapDispatchToProps函数:这两个函数用于将Redux状态和操作映射到组件属性中。mapStateToProps函数用于将Redux状态映射到组件属性中,而mapDispatchToProps函数用于将Redux操作映射到组件属性中。这使得您可以在组件内部访问和调用Redux操作和修改器,而无需直接与Redux API交互。

为什么要使用react-redux

使用React Redux有以下几个好处:

1. 组件的无状态(Stateless):React Redux允许您将业务逻辑与UI组件进行分离,让每个组件都保持无状态。您可以将应用程序的状态保存在Redux存储中,然后在需要时将数据从Redux存储传递到React组件中。

2. 状态一致性:通过使用React Redux,您可以将Redux存储中的状态集中管理,从而确保应用程序的状态一致性。通过Redux的明确数据流,可以跟踪状态的变化,使得调试和重构变得更加容易。

3. 可预测性:React Redux使得应用程序状态更具可预测性。由于Redux使用未变的函数和单向数据流,因此应用程序状态更容易理解和调试。

4. 组件重用:使用React Redux,可以将逻辑从UI组件中抽离出来,并提供高度复用的逻辑和组件。这可以使代码更易于维护,并减少开发时间。

5. 开发者工具支持:React Redux带有一个强大的开发者工具集,包括仪表盘和时间旅行器,使得调试和跟踪应用程序状态变化变得更加简单。

综上所述,React Redux是一个强大的状态管理工具,使得应用程序状态在React组件中的管理更加容易,同时提供一些优点,例如状态一致性,可预测性和组件重用。使用React Redux,可以使开发更快、代码更清晰,并提高应用程序的性能和可维护性。

react-redux官网https://cn.redux.js.org/introduction/getting-started/

容器组件与UI组件

在React Redux中,通常会将组件分为容器组件和UI组件。这种组件拆分模式有助于将业务逻辑与UI相关代码分离,并提高代码的可维护性和可复用性。

容器组件(Container Components):
容器组件是与Redux存储进行交互的组件。它们负责从Redux存储中获取数据,并将数据通过属性(props)传递给UI组件。容器组件通常包含与状态管理相关的代码,例如订阅Redux状态的变化,调用Redux操作来更新状态等。它们关心如何获取和更新数据,而不关心最终的UI呈现。

Example:

import { connect } from 'react-redux';
import { fetchData } from '../actions';
import MyComponent from './MyComponent';

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

const mapDispatchToProps = {
  fetchData,
};

const MyContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

export default MyContainer;

UI组件(UI Components):
UI组件是负责展示数据和用户交互的组件。它们仅负责呈现数据和定义UI交互行为,不涉及状态管理或业务逻辑。它们通过属性(props)接收数据并呈现在界面上,也会向父组件发出事件来响应用户操作。UI组件通常是无状态的函数组件,也可以是类组件。

Example:

import React from 'react';

const MyComponent = ({ data, fetchData }) => {
  return (
    <div>
      <h1>{data}</h1>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

export default MyComponent;

通过将容器组件与UI组件分离,可以使代码更清晰,逻辑更易于测试和维护。容器组件处理数据获取和状态管理的复杂性,而UI组件专注于UI渲染和用户交互。这种组件拆分模式使得将来更容易进行更改和重构,同时也有助于提高代码的可重用性。

react-redux需要配合?@reduxjs/toolkit使用

什么是@reduxjs/toolkit

`@reduxjs/toolkit`是Redux官方为了简化和提高开发体验而开发的一个工具包。它为使用Redux构建应用程序提供了一组常用的工具和实用程序,旨在简化开发流程并减少样板代码。通过`@reduxjs/toolkit`,您可以更快速地编写Redux代码,同时仍然享受到完整的Redux功能。

`@reduxjs/toolkit`提供了以下主要功能:

1. 集成了Redux常用的工具:`@reduxjs/toolkit`内置了常用的Redux工具,例如`createStore`、`createReducer`、`createAction`等。这些工具帮助您更方便地创建和组织Redux store、reducers以及actions。

2. 内置不可变性更新:`@reduxjs/toolkit`使用了`immer`库,它允许您以一种可变的方式来更新Redux状态。您可以直接修改状态对象,而`immer`会自动处理不可变性更新。这样,您可以省去手动编写不可变性更新逻辑的麻烦。

3. 简化的Redux配置:`@reduxjs/toolkit`通过使用`configureStore`函数来简化Redux的配置。它为您处理了一些常见的设置,例如中间件、持久化等。

4. 内置了Redux DevTools集成:`@reduxjs/toolkit`自动为您启用Redux DevTools的集成,使您可以轻松地在开发工具中查看和调试Redux store的状态和操作。

为什么使用@reduxjs/toolkit

使用`@reduxjs/toolkit`的原因有以下几点:

1. 简化开发流程:`@reduxjs/toolkit`是Redux官方推荐的工具包,它提供了一组简化和标准化的API和工具,使得开发Redux应用程序更加简单和高效。它内置了常见的Redux模式和最佳实践,让您可以更快地启动和编写Redux代码。

2. 减少样板代码:`@reduxjs/toolkit`提供了一种简洁的语法,可帮助您减少许多常见的Redux样板代码。这包括自动生成的Redux存储、自动对状态进行不可变性检查、自动创建动作和修改器函数等。这让您可以更专注于业务逻辑而不是样板代码。

3. 强大的状态管理:`@reduxjs/toolkit`提供了更简洁和直观的方式来管理和更新Redux的状态。通过使用`createSlice`函数,您可以将相关的动作和修改器组织在一个切片中,并自动处理切片的状态更新。这样,您可以更轻松地编写可维护和可扩展的Redux代码。

4. 内置不可变性:`@reduxjs/toolkit`默认使用Immer库来处理不可变性。这允许您在修改状态时直接修改对象,而不需要手动编写复杂的不可变更新逻辑。这样,您可以以更简洁和直观的方式来更新状态。

5. 内建异步处理:`@reduxjs/toolkit`提供了一个异步处理工具包`createAsyncThunk`,可帮助您处理异步逻辑,如数据获取和API调用。这个工具包可使您更容易地编写异步操作,并自动处理加载状态、成功和错误状态。

6. 开发者工具集成:`@reduxjs/toolkit`集成了Redux DevTools工具,使您能够在浏览器中轻松地调试和检查应用程序的状态变化。它提供了强大的时间旅行调试功能,允许您回放和检查状态的历史。

总的来说,`@reduxjs/toolkit`简化了Redux开发流程,提供了一种更加简洁和直观的方式来管理状态,并集成了强大的开发者工具。它是构建可维护和可扩展Redux应用程序的理想选择。如果您打算使用Redux作为您的状态管理方案,那么使用`@reduxjs/toolkit`将提供更好的开发体验和效率。

react-redux基本使用

下载

下载 react - redux @reduxjs/toolkit
npm i react-redux @reduxjs/toolkit

创建store

//store/index.js 文件

import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './modules/Counter'

 const store=configureStore({
  reducer: counterSlice.reducer
})
export default store

创建切片

// store/modules/Counter.js
import { createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    carlist: stronge.getstrong('car')
  },
  reducers: {
  // 改变数量的reducer
    changeNum: (state, actions) => {
     state.num += actions.payload;
    }
  }
})
// reduxjs toolkit 把reducer和actions合并在一起了
export const { changeNum } = counterSlice.actions;
// 到处reducer
export default counterSlice

入口文件配置

使用 react - redux 中的 Provider 组件包裹整个根组件,传递 store
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
    <Provider store={store}>
    </Provider>
  </React.StrictMode>
)

引入使用

components/Counter.js 中引入 connect 模块,用于从 UI 组件中生成容器组件
import { Component } from 'react'
import { connect } from 'react-redux'
import { changeNum } from '../store/modules/Counter';
// UI组件
class CounterUI extends Component {
 render() {
  // console.log(this.props)
  return (
   <div>
    <button onClick={ () => this.props.changeNum(1) }>+</button>
    <span>{ this.props.num }</span>
    <button onClick={ () => this.props.changeNum(-1) }>-</button>
   </div>
  )
 }
}
// 获取store中的数据的方法
const mapstateFromProps = state => {
// state: store仓库中的数据
// console.log(state)
  return {
   num: state.counter.num
  }
 }
// 修改store中的数据的方法
const mapDispatchFromProps = dispatch => {
 return {
  changeNum: num => {
 // 调用dispatch方法,传递actions
   dispatch(changeNum(num))
  }
 }
}
// 容器组件
const Counter = connect(mapstateFromProps, mapDispatchFromProps)(CounterUI);
export default Counter

文章来源:https://blog.csdn.net/kkkys_kkk/article/details/135442628
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。