Redux：useSelector用法、mapDispatchProps等价方案及代码转换

mapDispatchProps 的等价替代方案 #

在Redux Hooks体系里，没有和mapDispatchProps完全对应的API，但可以通过两种方式实现相同逻辑：

• 直接用useDispatch：获取dispatch函数后，直接调用action creator并传入dispatch（官方推荐这种写法，代码更直观）。
• 结合bindActionCreators：和connect里的用法一致，把action creators绑定到dispatch上，适合习惯原有写法的场景。

第一段代码转换示例 #

原connect写法 #

const mapStateToProps = (state) => ({ currentUser: state.user, });

const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUser, fetchUserPosts }, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(main);

转换为Hooks写法 #

import { useSelector, useDispatch } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchUser, fetchUserPosts } from './your-action-path';

function Main() {
  // 替代mapStateToProps：用useSelector提取state
  const currentUser = useSelector(state => state.user);
  
  const dispatch = useDispatch();

  // 方式1：直接dispatch action（官方推荐）
  const fetchUserHandler = () => dispatch(fetchUser());
  const fetchUserPostsHandler = () => dispatch(fetchUserPosts());

  // 方式2：用bindActionCreators（和原写法对齐）
  const { fetchUser: boundFetchUser, fetchUserPosts: boundFetchUserPosts } = bindActionCreators(
    { fetchUser, fetchUserPosts },
    dispatch
  );

  // 组件逻辑...
  return <div>...</div>;
}

export default Main;

第二段代码转换示例 #

原connect写法 #

import React from 'react'
import { View, Text, Image, FlatList } from 'react-native'
import { auth } from '../../firebaseConfig'

import { fetchUserPosts } from '../../redux/actions/index.js'

import { connect } from 'react-redux'

function Profile(props) {
  const { currentUser, posts } = props;
  console.log({ currentUser, posts });
  return (
    <View>
      <Text>Profile</Text>
    </View>
  )
}

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser,
  posts: store.userState.posts,
})

export default connect(mapStateToProps, null)(Profile);

转换为Hooks写法 #

import React from 'react'
import { View, Text, Image, FlatList } from 'react-native'
import { auth } from '../../firebaseConfig'

import { fetchUserPosts } from '../../redux/actions/index.js'
import { useSelector } from 'react-redux'

function Profile() {
  // 替代mapStateToProps：直接用useSelector获取所需state字段
  const currentUser = useSelector(store => store.userState.currentUser);
  const posts = useSelector(store => store.userState.posts);
  
  console.log({ currentUser, posts });
  
  return (
    <View>
      <Text>Profile</Text>
    </View>
  )
}

export default Profile;

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