React-redux: правильный способ навигации между дочерними компонентами и родительским компонентом - PullRequest
Новая
       19

React-redux: правильный способ навигации между дочерними компонентами и родительским компонентом

0 голосов
/ 14 марта 2019

Я новичок в реаги-редуксе. В моем приложении «Реактивный» у меня есть компонент 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() будет работать.

1 Ответ

0 голосов
/ 14 марта 2019

Попробуйте это 

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. Оформить заказ Поток аутентификации в своих документах

...