React-Redux:在儿童组件和父组件之间导航的正确方法

Question

我是React-Redux的新手。在我的React-Native应用程序中，我有一个Auth组件，该组件由屏幕和导入Login和SignUp组件使用，每个组件都代表登录和注册页面。当用户单击注册时，我想显示SignUp组件。

auth组件：

import Login from './login'
import SignUp from './signup'
import { showSignUpView } from '../../actions/index';
class UserAuth extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return (
            <View style={styles.centerView}>
                {this.props.authStep == "login" ? (
                    <View>
                        <View>
                            <Login navigation={this.props.navigation}/>
                        </View>
                        <View>
                            <Text style={{marginHorizontal: 10}}>or</Text>
                        </View>
                        <View>
                            <TouchableOpacity onPress={()=> this.props.showSignUpView()}>
                                <Text>Sign Up</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                ):(
                    // props.authStep == "signup"
                    <View>
                        <SignUp navigation={this.props.navigation}/>
                    </View>
                )}
            </View>
        )
    }
}
const mapStateToProps = state => {
    return {
      authStep: state.auth.authStep
    }
  }
export default connect(mapStateToProps, {showSignUpView})(UserAuth);

在我的动作索引中，我有 showSignUpView函数

// brings user to signup page
export const showSignUpView = (dispatch) => {
    dispatch({type: "GO_TO_SIGNUP_PAGE"})
}

在我的还原器中，我有注册页面的理由：

const initialState = {
    authStep: "login"
}
export default (state = initialState, action) => {
    switch(action.type) {
        case "GO_TO_SIGNUP_PAGE":
            return { ...state, authStep: "signup"}
        default:
            return state;
    }
}

这不起作用，给我错误：

dispatch is not a function. (In 'dispatch({
  type: "GO_TO_SIGNUP_PAGE"
})', 'dispatch' is undefined)

做到这一点的正确方法是什么？我还想在SignUp页面中添加一个返回按钮，该按钮将用户带回主验证组件。做到这一点的最佳方法是什么？由于Auth是一个组件，而不是屏幕，因此我怀疑props.navigation.goBack()会起作用。

Answer 1

尝试此

export const showSignUpView = () => (dispatch) => {
    dispatch({type: "GO_TO_SIGNUP_PAGE"})
}

以非箭头功能的方式（在redux-thunk的文档中记录的方式）

与此相同

export function showSignUpView() {
  return (dispatch) => {
    dispatch({type: "GO_TO_SIGNUP_PAGE"})
  }
}

旁注

要在屏幕之间导航（如果我没有错误地弄错，您正在使用react-navigation），我发现使用react-navigation的导航器来做它更为很棒。查看其文档中的身份验证流