Redux Action触发但页面未跳转（React-Navigation集成问题）

看了你的代码和问题描述，我发现几个核心问题导致导航Action无法触发视图跳转，咱们逐一分析修复：

1. Root组件渲染了错误的导航实例 #

你在Root的renderApp方法里直接渲染了Navigator（也就是StackNavigator创建的原始导航组件），但你已经实现了一个连接Redux的Nav组件并默认导出。导航状态需要和Redux store同步，必须渲染经过connect处理的Nav组件，而不是原始的Navigator。

修改Root代码：

// 注意导入的是默认导出的Nav，而非命名导出的Navigator
import Nav from './your-navigator-file-path';

export default class Root extends React.Component {
  props: Props;
  renderApp() {
    const store = createStore(rootReducer, applyMiddleware(logger, middleware));
    return (
      <Provider store={store}>
        <Nav /> {/* 替换成connect后的Nav组件 */}
      </Provider>
    );
  }
  render() {
    return this.renderApp();
  }
}

2. mapStateToProps 参数逻辑错误 #

在Nav组件的mapStateToProps中，你把参数直接当作navigation state，但实际上这个参数是整个Redux store的state对象。你需要从state中提取navigation字段传递给组件：

// 错误写法
// const mapStateToProps = (navigation) => ({ navigation, });

// 正确写法
const mapStateToProps = (state) => ({ 
  navigation: state.navigation 
});

3. 排查Redux-Saga是否拦截导航Action #

如果你的saga监听了全局Action，或者误拦截了Navigation/NAVIGATE类型的Action，会导致导航中间件无法接收到这个Action，从而无法触发跳转。检查你的saga代码：

• 确保没有不必要地拦截导航相关Action
• 如果需要在saga中处理导航Action，处理完成后要通过put将Action重新派发，传递给导航中间件

4. 确认导航Action的类型正确性 #

你用reduxsauce创建的Actions.navigate，必须保证其Action类型与react-navigation-redux-helpers期望的一致（即Navigation/NAVIGATE）。如果类型不匹配，导航中间件无法识别Action，自然不会触发跳转。

方案一：修正reduxsauce的Action定义 #

import { createActions } from 'reduxsauce';

export const { Types, Creators } = createActions({
  navigate: ['routeName', 'params'],
}, { prefix: 'Navigation/' }); // 添加前缀确保类型为Navigation/NAVIGATE

方案二：直接使用react-navigation内置的NavigationActions #

import { NavigationActions } from 'react-navigation';

const mapDispatchToProps = dispatch => ({
  navigate: (routeName, params = {}) => dispatch(NavigationActions.navigate({ routeName, params }))
});

把以上几点修正后，导航Action应该就能被正确处理，视图也能正常跳转了。

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