如何将React-Redux类组件改为函数式组件并替换为useSelector与useDispatch

没问题！我来帮你把这个类组件重构为使用useSelector和useDispatch的函数式组件，这俩Hook用起来比传统的connect更简洁直观。咱们先看完整的重构后代码，再拆解关键变化：

重构后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Action 无需修改
const plusLike = index => ({ type: "PLUS_LIKE", payload: index });

// Reducer 无需修改
const reducer = (state = { like: 0 }, action) => {
  switch(action.type){
    case "PLUS_LIKE":
      return Object.assign({}, state, { like: action.payload });
    default:
      return state
  }
};

// 函数式组件版本的App
function App() {
  // 用useSelector替代mapStateToProps：从store中获取like值
  const onLike = useSelector(state => state.propReducer.like);
  // 用useDispatch获取dispatch函数
  const dispatch = useDispatch();

  // 定义点击事件的处理函数，替代matchDispatchToProps里的onPlusLike
  const handlePlusLike = () => {
    dispatch(plusLike(onLike + 1));
  };

  return (
    <div>
      <button onClick={handlePlusLike}>Like</button>
      {onLike}
    </div>
  );
}

// 以下部分无需修改（除了不再需要connect）
const allReducers = combineReducers({ propReducer: reducer });
const store = createStore(allReducers);

ReactDOM.render(
  <Provider store={store}>
    {/* 直接渲染App，不再需要connect包裹 */}
    <App />
  </Provider>,
  document.getElementById("root")
);

关键变化解析 #

• 导入Hook：从react-redux中新增导入useSelector和useDispatch，这是函数式组件访问Redux store的核心Hook。
• 替代mapStateToProps：useSelector接收一个回调函数，参数是Redux的整个state，返回你需要的具体状态值（这里就是state.propReducer.like），相当于把mapStateToProps的逻辑直接写在组件内部。
• 替代matchDispatchToProps：useDispatch返回Redux store的dispatch函数，我们直接用它来分发action，不需要再通过connect包装dispatch成props。
• 简化组件结构：不再需要类组件和connect高阶组件，函数式组件更简洁，状态和dispatch的获取都在组件内部完成。
• 点击事件优化：把原来的内联函数抽成了handlePlusLike，代码更清晰，逻辑和组件UI分离。

这样重构后，功能和原来完全一致，但代码更简洁，也符合React函数式编程的趋势。如果有其他疑问，随时问我！

内容的提问来源于stack exchange，提问作者nathan111777