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

目录

什么是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