Редуктор всегда возвращает исходное состояние React-native

Question

Я хочу использовать Редукторы, Редуксы, Тук.У меня есть пример кода.
Когда я запускаю проект, работаю без ошибок.Я хочу изменить адрес электронной почты, когда появляется первая буква, и вернуть значение Начальное значение.
Я использовал эти коды с этим package.json, но при обновлении всех библиотек происходит сбой некоторых функций.Я делюсь финальным файлом package.json в конце моего сообщения.
файл package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^25.0.0",
    "lodash": "^4.17.4",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-router-flux": "^3.40.1",
    "react-redux": "^5.0.6",
    "react-router-native": "^4.2.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }
}

Пожалуйста, посмотрите мой gif.
Проблема Gif

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';


class App extends Component {
  render() {
    const store = createStore(reducers, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

router.js

import React from 'react';
import {Scene, Router, Stack} from 'react-native-router-flux';
import Login from './components/Login';

const RouterComponent = () => {
  return (
    <Router navigationBarStyle={{backgroundColor: 'transparent'}}>
      <Stack key="root">
          <Scene key="Login" component={Login} title="Giriş Yap" backTitle=" " hideNavBar={true} type="reset" initial/>
      </Stack>
    </Router>

  );
};

export default RouterComponent;

Это мой Login.js. Я хочу изменить адрес электронной почты или пароль в textinput, вернуть начальное значение

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import { KucukButton } from '../ortak';

class Login extends Component {
  state ={ email: '', password: '', loading: false };

clickLogin() {
  const { email, password } = this.props;
  this.props.loginUser({ email, password });
}

loginSucces() {
  console.log('başarılı');
  this.setState({ loading: false });
}


loginFail() {
  console.log('Hatalı');
  this.setState({ loading: false });
  Alert.alert(
    'Mesaj',
    'Kullanıcı adı veya şifreniz hatalı!',
    [
      { text: 'Tamam', onPress: () => null }
    ]
  );
}
  render() {
    return (
       <View
        style={{
          justifyContent: 'center',
          flex: 1
        }}>
            <TextInput
              autoCapitalize="none"
              keyboardType="email-address"
              placeholder="örn hesap: test@test.com"
              placeholderTextColor="#000"
              value={this.props.email}
              onChangeText={email => this.props.emailChanged(email)}
            />
            <KucukButton yazisiz="hayir" onPress={this.clickLogin.bind(this)}> Giriş Yap </KucukButton>
      </View>
    );
  }
}
const mapStateToProps = ({ kimlikdogrulamaResponse }) => {
  const {email, password }= kimlikdogrulamaResponse;
  return {
    email,
    password
  };
};

export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(Login);

и это мои actions.js

import { EMAIL_CHANGED, PASSWORD_CHANGED } from './types';

export const emailChanged = (email) => {
  return (dispatch) => {
    dispatch({
      type: EMAIL_CHANGED,
      payload: email
    });
  };
};


export const passwordChanged = (password) => {
  return (dispatch) => {
    dispatch({
      type: PASSWORD_CHANGED,
      payload: password
    });
  };
};

types.js

export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';

Reducers.js

import { EMAIL_CHANGED, PASSWORD_CHANGED } from '../actions/types';

const INITIAL_STATE = {
  email: '00000000',
  password: ''
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
        return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
  default:
      return state;

  }
};

наконец мой package.jsonфайл:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^31.0.2",
    "firebase": "^5.7.2",
    "lodash": "^4.17.11",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-router-flux": "^4.0.6",
    "react-redux": "^6.0.0",
    "react-router-native": "^4.3.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

РЕДАКТИРОВАТЬ :: вы можете посмотреть мою закуску для тестирования. Snack Expo Application

Answer 1

Теперь вы отправляете каждое нажатие клавиши, это не лучшая практика.Вместо этого вы должны записать значения электронной почты и пароля в состояние.

<TextInput
    autoCapitalize="none"
    keyboardType="email-address"
    placeholder="örn hesap: test@test.com"
    placeholderTextColor="#000"
    defaultValue={this.props.email} //use defaultValue
    onChangeText={(email) => this.setState({email})} //use state
/>

После этого вы должны отправить this.state.email вашему создателю действия в функции входа в систему.

clickLogin() {
    const {email, password} = this.props;
    this.props.emailChanged(this.state.email) //now you should dispatch
    this.props.loginUser({email, password});
}

Также вы должны использовать тот же способ для пароля.

Answer 2

Похоже, вы не отправляете никаких действий.

В вашем Login компоненте вы вызываете свою функцию, определенную в файле actions, но это возвращает другую функцию, которую никто не вызывает.

Вы можете попытаться сопоставить реквизиты в вашем логине как:

const mapDispatchToProps = dispatch => ({
    emailChanged: email => emailChanged(email)(dispatch)
});

То же, что и выше для вашего пароля.

Даже если это должно сработать, ваш паттерн здесь немного странный.В вашем случае вы можете реструктурировать свой код таким образом для более ясного понимания:

const mapDispatchToProps = dispatch => ({
    emailChanged: email => dispatch(emailChanged(email))
});

И ваши действия, такие как:

export const emailChanged = email => ({
   type: EMAIL_CHANGED,
   payload: email
});

В обоих вышеупомянутых случаях, введя mapDispatchToProps, затемваш connect должен выглядеть примерно так:

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