Функция mapDispatchToProps не определена - PullRequest
Новая
       9

Функция mapDispatchToProps не определена

0 голосов
/ 13 октября 2018

Я пытаюсь заставить работать излишки в своем приложении, работающем на родном языке.По сути, у меня есть действие входа в систему, определенное в моем файле authActions.js: 

const signInAction = () => {
    return {
        type: 'signIn',
    };
};

export { signInAction };

Затем в authReducer.js определено значение authReducer: 

const initialState = {
    isAuthenticated: false,

}

const authReducer = (state = initialState, action) => {

    switch(action.type) {

        case "signIn": 
            return Object.assign({}, state, {
                isAuthenticated: true,

            })


        default: return state;
    }

};

export default authReducer;

Я объединяю этот редукторв моем файле rootReducer.js 

import { combineReducers } from 'redux';

import auth from 'app/src/redux/reducers/authReducer.js';

const rootReducer = combineReducers({
    auth,
});

export default rootReducer;

, а затем создал хранилище в reduxIndex.js: 

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from 'app/src/redux/reducers/rootReducer.js';

let store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
export default store;

Я обернул свое приложение в <Provider> компонент, и это, кажется,работает нормально (я могу прочитать из состояния и увидеть значение isAuthenticated. Однако, когда я пытаюсь отправить действие с использованием mapDispatchToProps в одном из моих представлений, функция не определена: 

// More imports 
// ... 

import { connect } from 'react-redux';
import { signInAction } from 'app/src/redux/actions/authActions.js';

const mapStateToProps = (state) => {
  return {};
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSignIn: () => { dispatch(signInAction) },
  };
}
class SignIn extends Component {

  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    }
  }

  onSignInPress() {
    // ******* this is where the error occurrs ****
    this.props.onSignIn();
  }

  render() {

    const {navigation} = this.props;

    return (

            <View style={SignInStyles.container}>
              <ScrollView>
                <View>


                  <Button 
                    large 
                    title="SIGN IN"
                    backgroundColor={colors.primary}
                    onPress={this.onSignInPress}
                  />
                </View>

              </ScrollView>
            </View>


    );

  }

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

Я не могу реально увидетьгде я иду не так, но я уверен, что это простая ошибка где-то. Конкретная ошибка, которую я получаю:

"undefined не является объектом. Оценка this.props.onSignIn"

1 Ответ

0 голосов
/ 13 октября 2018

Обратный вызов onSignInPress не привязан к какому-либо конкретному объекту, поэтому при вызове this это undefined.

Простой способ исправить это - использовать синтаксис стрелки для его создания.всегда быть связанным.В вашем определении класса: 

onSignInPress = () => {
  this.props.onSignIn();
}

Google нашел меня эта статья среднего уровня от Мирона Мачницки , которая довольно подробно объясняет различия и возможные альтернативные синтаксисы.

...