当前位置：首页 > React

如何react和redux

2026-02-12 01:16:01React

React 和 Redux 的基本概念

React 是一个用于构建用户界面的 JavaScript 库，专注于组件化开发。Redux 是一个状态管理库，通常与 React 结合使用，用于管理应用中的全局状态。

React 的核心特性

React 的核心思想是组件化和虚拟 DOM。组件是独立的、可复用的 UI 单元，通过 props 和 state 管理数据。虚拟 DOM 通过高效的 diff 算法优化渲染性能。

Redux 的核心概念

Redux 的核心包括三个部分：store、action 和 reducer。store 是全局状态的容器，action 是描述状态变化的普通对象，reducer 是纯函数，根据 action 更新状态。

安装 React 和 Redux

使用 npm 或 yarn 安装 React 和 Redux：

npm install react react-dom redux react-redux

创建 React 组件

React 组件可以通过函数或类定义。函数组件更简洁，类组件可以管理状态和生命周期方法。

import React from 'react';

function MyComponent(props) {
  return <div>{props.message}</div>;
}

设置 Redux Store

创建 Redux store 需要定义 reducer 并使用 createStore 方法。

import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

连接 React 和 Redux

使用 react-redux 提供的 Provider 和 connect 将 React 组件与 Redux store 连接。

import { Provider, connect } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <ConnectedComponent />
    </Provider>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

触发 Redux Action

通过 dispatch 方法触发 action 更新状态。

function MyComponent({ count, dispatch }) {
  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment: {count}
      </button>
    </div>
  );
}

异步操作与中间件

Redux 本身不支持异步操作，可以通过中间件如 redux-thunk 实现。

npm install redux-thunk

配置中间件：

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(reducer, applyMiddleware(thunk));

定义异步 action：

function fetchData() {
  return dispatch => {
    fetch('api/data')
      .then(res => res.json())
      .then(data => dispatch({ type: 'SET_DATA', payload: data }));
  };
}

使用 Redux Toolkit 简化流程

Redux Toolkit 是官方推荐的 Redux 工具集，简化了常见任务。

npm install @reduxjs/toolkit

创建 slice 和 store：

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    }
  }
});

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

性能优化

React 和 Redux 的性能优化包括避免不必要的渲染和使用 memoization。React 的 React.memo 和 useMemo 可以优化组件渲染。

const MemoizedComponent = React.memo(MyComponent);

Redux 的 reselect 库可以创建记忆化的 selector。

npm install reselect

使用 reselect：

如何react和redux

import { createSelector } from 'reselect';

const selectCount = state => state.count;

const doubleCount = createSelector(
  selectCount,
  count => count * 2
);