react函数如何调用redux
在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;这种模式可以避免在每个组件中重复类型声明，保持类型安全的同时简化代码。
