Redux中dispatch与connect失效求助：fetch未调用+状态映射报错

问题1："no store property exists" 错误 & currentUser/posts 始终为undefined #

这个问题核心是组件未接入Redux的store上下文，按以下步骤修复：

• 根组件必须用Provider包裹
  打开根组件（比如App.js），确保所有需要访问Redux的组件都被Provider包裹，示例代码：

  import { Provider } from 'react-redux';
  import store from './store'; // 你的store配置文件
  
  export default function App() {
    return (
      <Provider store={store}>
        {/* 这里放置你的路由、Profile组件等内容 */}
      </Provider>
    );
  }
  

• 正确使用connect连接组件
  在profile.js中，connect需同时处理状态映射和action映射，写法如下：

  import { connect } from 'react-redux';
  import { fetchUser, fetchUserPosts } from '../actions'; // 导入你的action
  
  class Profile extends React.Component {
    // 组件逻辑代码
  }
  
  // 映射Redux state到组件props
  const mapStateToProps = (state) => ({
    currentUser: state.user.currentUser, // 注意路径要和你的reducer结构匹配
    posts: state.posts.posts
  });
  
  // 映射action到组件props
  const mapDispatchToProps = {
    fetchUser,
    fetchUserPosts
  };
  
  // 导出连接后的组件
  export default connect(mapStateToProps, mapDispatchToProps)(Profile);
  

  若使用函数组件，推荐用useSelector和useDispatch钩子：

  import { useSelector, useDispatch } from 'react-redux';
  import { fetchUser, fetchUserPosts } from '../actions';
  
  function Profile() {
    // 从state中取值
    const currentUser = useSelector(state => state.user.currentUser);
    const posts = useSelector(state => state.posts.posts);
    const dispatch = useDispatch();
  
    // 组件逻辑代码
  }
  

问题2：fetchUser和fetchUserPosts从未被调用 #

解决store连接问题后，需在组件生命周期中主动触发这些action：

• 类组件用componentDidMount

  componentDidMount() {
    // 通过props调用action方法
    this.props.fetchUser();
    this.props.fetchUserPosts();
  }
  

• 函数组件用useEffect

  import { useEffect } from 'react';
  
  function Profile() {
    const dispatch = useDispatch();
  
    useEffect(() => {
      // 触发异步action
      dispatch(fetchUser());
      dispatch(fetchUserPosts());
    }, [dispatch]); // 依赖dispatch确保只执行一次
  }
  

额外检查项 #

• 若你的action是异步类型（比如调用API），必须确保store配置了redux-thunk中间件：

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const store = createStore(rootReducer, applyMiddleware(thunk));
  export default store;
  

• 检查reducer是否正确处理了action的type，比如fetchUser请求成功后，reducer要更新对应的state字段，否则即使action调用成功，state里也不会有有效值。

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