Redux入门:使用@reduxjs/toolkit构建React应用程序状态管理

news2024/11/16 1:51:48

随着应用程序复杂性的增加,有效管理应用程序状态变得越来越重要。Redux是一种流行的状态管理解决方案,随着应用程序复杂性的增加,有效管理应用程序状态变得越来越重要。Redux是一种流行的状态管理解决方案,但传统的Redux设置和使用过程比较繁琐。幸运的是,Redux官方团队推出了@reduxjs/toolkit,这个工具包极大简化了Redux在React项目中的使用.

在这里插入图片描述

传统Redux vs @reduxjs/toolkit

传统Redux:

需要手动编写action creators、action types和reducers
需要手动配置中间件和开发者工具
处理异步操作需要单独使用redux-thunk或redux-saga
不可变状态更新需要手动使用深拷贝或Object.assign等
需要手动编写选择器函数

使用@reduxjs/toolkit:

使用createSlice自动生成action creators和action types
使用configureStore自动配置中间件和开发者工具
内置createAsyncThunk处理异步操作
内置immer.js,简化不可变状态更新
提供createSelector创建选择器函数
代码更加简洁,减少样板代码

总的来说,@reduxjs/toolkit通过工具函数和opinionated的默认配置,极大简化了Redux的使用,提高了开发效率。它包装了许多常用功能,同时也保留了Redux可扩展的优势。

使用@reduxjs/toolkit的最小示例

一个使用@reduxjs/toolkit构建简单计数器的示例:

安装依赖

npm install @reduxjs/toolkit react-redux

创建 store

新建 store.js 文件:

import { configureStore } from '@reduxjs/toolkit';

// 定义初始状态
const initialState = {
  counter: 0
}

// 创建切片
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    // 定义修改state的reducer
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})

// 导出 reducer 和 actions
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

// 配置store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

export default store;

在React组件中使用

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

const Counter = () => {
  const count = useSelector(state => state.counter.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}

export default Counter;

在入口文件中提供store

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
)

export default App;