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

目录

什么是react-redux

为什么要使用react-redux

什么是@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官网入门 Redux | Redux 中文官网

什么是@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 counter from './modules/Counter';

const store = configureStore({
  reducer: {
    Count: counter,
  },
});
export default store;

创建切片

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

入口文件配置

使用 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>
)

引入使用

import logo from './logo.svg';
import './App.css';

import { changeNum } from './store/modules/Counter';
import { useSelector, useDispatch } from 'react-redux';
function App() {
  let dispatch = useDispatch();
  let { count } = useSelector((store) => store.Count);
  const change = () => {
    dispatch(changeNum(new Date().getTime()));
  };
  return (
    <div className="App">
      {count}
      <button onClick={change}>我要变化</button>
    </div>
  );
}

export default App;