当前位置：首页 > React

react函数如何调用redux

2026-01-24 07:19:18React

在React函数组件中调用Redux

使用react-redux库提供的useSelector和useDispatch钩子函数，可以在函数组件中访问Redux状态和派发action。

安装必要依赖：

npm install react-redux @reduxjs/toolkit

访问Redux状态

使用useSelector从Redux store中提取需要的状态：

import { useSelector } from 'react-redux';

function MyComponent() {
  const counter = useSelector(state => state.counter);
  return <div>{counter}</div>;
}

派发Redux Action

使用useDispatch获取dispatch函数来派发action：

import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function CounterButton() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Increment
    </button>
  );
}

结合使用示例

完整的Redux Toolkit使用示例：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

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

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

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

export default Counter;

性能优化

对于复杂的选择器，可以使用reselect创建记忆化选择器：

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

const selectUser = state => state.user;
const selectUserId = createSelector(
  selectUser,
  user => user.id
);

TypeScript支持

为Redux添加类型支持：

// store.ts
import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

这种模式可以避免在每个组件中重复类型声明，保持类型安全的同时简化代码。

react函数如何调用redux