React导航v5:如何使用redux thunk/redux saga导航？

npm install redux-thunk

// 导航相关的action类型
export const NAVIGATE = 'NAVIGATE';

// 导航操作的action创建函数
export const navigate = (route) => {
  return (dispatch) => {
    // 执行导航逻辑，例如使用React导航库进行路由跳转
    // dispatch其他的action来更新redux store

    dispatch({ type: NAVIGATE, payload: route });
  };
};

import { connect } from 'react-redux';
import { navigate } from './actions/navigation';

const MyComponent = ({ navigate }) => {
  const handleNavigation = () => {
    navigate('/dashboard');
  };

  return (
    <button onClick={handleNavigation}>跳转到仪表盘</button>
  );
};

export default connect(null, { navigate })(MyComponent);

npm install redux-saga

import { put, takeEvery } from 'redux-saga/effects';
import { NAVIGATE } from '../actions/navigation';

// 处理导航操作的saga
function* handleNavigation(action) {
  // 执行导航逻辑，例如使用React导航库进行路由跳转
  // 发起其他的action来更新redux store

  yield put({ type: NAVIGATE, payload: action.payload });
}

// 监听导航操作的saga
function* watchNavigation() {
  yield takeEvery(NAVIGATE, handleNavigation);
}

export default watchNavigation;

import { all } from 'redux-saga/effects';
import watchNavigation from './sagas/navigation';

export default function* rootSaga() {
  yield all([
    watchNavigation(),
    // 其他的sagas
  ]);
}

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();

// 创建Redux store并应用中间件
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// 运行根saga
sagaMiddleware.run(rootSaga);

export default store;

import { connect } from 'react-redux';
import { navigate } from './actions/navigation';

const MyComponent = ({ navigate }) => {
  const handleNavigation = () => {
    navigate('/dashboard');
  };

  return (
    <button onClick={handleNavigation}>跳转到仪表盘</button>
  );
};

export default connect(null, { navigate })(MyComponent);