React-redux：在子组件和父组件之间导航的正确方法

Question

我是 react-redux 的新手。在我的 react-native 应用程序中，我有一个 Auth 组件，供屏幕使用并导入 Login 和 SignUp 组件，每个组件代表登录和注册页面。当用户点击注册时，我想显示SignUp 组件。

认证组件：

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);

在我的操作的 index.js 中，我有 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 组件。实现这一目标的最佳方法是什么？由于 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 的导航器会更棒。查看Authentication Flow in their docs