Question

我是React Redux的新手。在我的本机应用程序中，我有一个Auth组件，该组件由屏幕使用，并导入Login和SignUp组件，每个组件代表登录和注册页面。当用户单击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

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

1 个答案: