问题描述
当我决定使用redux和redux-saga时，我已经在使用带有反应导航的原生反应了。 我的问题是我不知道如何在Reducer或Saga文件中导航。 我找到了这个link on how to navigate without navigation prop，但这个示例与我的入口文件(index.js)和顶级导航器(src/app.js，不确定这是否是顶级导航器)不同。index.js(条目)
import React from "react";
import { Provider } from "react-redux";
import { AppRegistry } from 'react-native';
import store from './src/store';
import App from './src/App';
class Entry extends React.Component {
render() {
return (
<Provider store={store}>
<App />
</Provider>
);
}
}
AppRegistry.registerComponent('testApp', () => Entry);
src/App.js
import { createSwitchNavigator, createStackNavigator } from "react-navigation";
import HomeContainer from './containers/HomeContainer';
import SplashContainer from "./containers/SplashContainer";
import LoginContainer from "./containers/LoginContainer";
const HomeStack = createStackNavigator(
{
Home: HomeContainer,
}
);
const LoginStack = createStackNavigator(
{
Login: LoginContainer,
}
);
export default createSwitchNavigator(
{
Splash: SplashContainer,
Dashboard: HomeStack,
Login: LoginStack
},
{
initialRouteName: "Splash"
}
);
Package.json
"react-native": "0.55.4",
"react-navigation": "^2.1.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-saga": "^0.16.0",
推荐答案
我认为您是在问如何在SAGA文件中导航，即使您的问题没有显示SAGA文件。
您可以在SAGA正在侦听的操作中传递导航对象，然后在该文件中正常使用它。
我正在使用它在成功注册操作后导航。这里有一个例子。
在组件中：
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
}
...
dispatchSignUp() {
const { email, password } = this.state;
const { signUp, navigation } = this.props;
signUp(email, password, navigation);
}
render() {
...
<Button onPress={() => this.dispatchSignUp()} />
...
}
}
export const mapDispatchToProps = dispatch => ({
signUp: (email, password, navigation) => dispatch(signUpAction(email, password, navigation)),
});
export default connect(null, mapDispatchToProps)(SignUpForm);
您的操作：
const signUp = (email, password, navigation) => ({
type: 'SIGN_UP',
email,
password,
navigation,
});
export default signUp;
您的传奇故事：
import { takeLatest, call, put } from 'redux-saga/effects';
import { createUser } from '../services/index';
export function* signUpWorker(action) {
try {
const { email, password, navigation } = action;
const payload = { email, password };
const data = yield call(createUser, payload);
yield put({ type: 'SIGN_UP_SUCCESS', data });
navigation.navigate('Main');
} catch (error) {
yield put({ type: 'SIGN_UP_ERROR', error });
}
}
export default function* signUpWatcher() {
yield takeLatest('SIGN_UP', signUpWorker);
}
navigation.navigate('Main')是本文的重点部分。希望路上没有太多的垃圾。
干杯。