Как передать состояние контейнеру в React Native

Надеюсь, это поможет:

Авторизоваться:

НИКОГДА не обновляйте свойства компонента внутри указанного компонента.

Из Документация React:

Props are Read-Only

Если вы хотите, чтобы ваше состояние (истина) сохранялось в компоненте входа в систему, сохраните его как правильное состояние и отправьте это локальное состояние при отправке:

onChangeText = (key, value) => {
   this.setState((state) => ({ ...state, [key] => value}))
}

Однако, если вы хотите сохранить свое состояние в redux, вам нужно будет создать действие, которое может быть запущено для обновления состояния redux. Это действие необходимо передать в свойства компонента и называть его следующим образом: onChangeText = {val => this.props.onChangeText('email', val)}.

Кроме того, вы вызываете функцию fetchUserDetails при рендеринге, где вы должны передавать обратный вызов. this.fetchUserDetails не существует, this.props.fetchUserDetails существует. Код входа становится

<TouchableOpacity onPress = {() => fetchUserDetails(user)}>

Контейнер входа в систему:

mapDispatchToProps должен быть функцией, которая принимает dispatch в качестве первого параметра ИЛИ объектом, где каждая функция является создателем действия. Из Документация Redux:

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

Итак, код, который вы написали:

const mapDispatchToProps = {
  ...fetchUserDetails,
}

Эквивалентно этому коду

function mapDispatchToProps(dispatch) {
    return {
        fetchUserDetails: (user) => dispatch(fetchUserDetails(user))
    },
}

Функция dispatch - это то место, где происходит волшебство, каждое отправленное действие передается вашим редукторам, где вы можете создать новое состояние на основе действия.

Управление хранилищем redux в react-native в основном такое же, как и в react.

Насколько я понимаю, вы пытаетесь хранить данные пользователя в хранилище redux для каждого события onChangeText и отражать обновленное состояние в компоненте входа в систему.

Во-первых, вы должны использовать отдельную пару редукторов действий для настройки данных пользователя в redux. Также вы, скорее всего, захотите вызвать какой-либо API при отправке формы и сохранить ответ в redux. Для этого вам может потребоваться другая пара действий и редуктора. Я оставлю это тебе

Вот как вы можете управлять данными пользователя в сокращении ...

Ваш компонент входа в систему без сохранения состояния.

export class Login extends Component {
   onChangeText = (value, key) => {
     this.props.setUserDetails({
       ...this.props.user,
       [key]: value
     })
  }

  render() {
    const { user, onSubmitForm } = this.props
    console.info('user===>', this.props);
    return (
      <View style = {styles.container}>
        <Text style = {styles.heading}>Login</Text>
        <TextInput
          placeholder='Email'
          onChangeText = {val => this.onChangeText(val, 'email')}
          placeholderTextColor = {'rgba(0,40,70,0.5)'}
          value = {user.email}
        />
        <TextInput
          placeholder='Password'
          onChangeText = {val => this.onChangeText(val, 'password')}
          placeholderTextColor = {'rgba(0,40,70,0.5)'}
          value = {user.password}
        />
        <TouchableOpacity onPress = {() => onSubmitForm(user)}>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>Login</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

...

Ваш контейнер для входа в систему.

class LoginContainer extends Component {
  onSubmitForm = () => {
    // Checking Validations
    const { name, email } = this.props;
    if (!name || !email) {
      alert('Please fill the form')
      return;
    }

    // call some API for verification and handle the response here
  }

  render () {
    return (
      <Login
        user = {this.props.user}
        setUserDetails = {this.props.setUserDetails}
        onSubmitForm = {this.onSubmitForm}
      />
    )
  }
}

const mapStateToProps = (state) => ({
  user: state.userReducer.user,
})

const mapDispatchToProps = dispatch => ({
  setUserDetails: payload => dispatch(setUserDetails(payload)),
})

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

...

Ваш редуктор для настройки данных пользователя

const initialState = {
  user: {
    email: '',
    password: '',
  }
}

const userReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_USER_DETAILS':
      return Object.assign({}, state, {
        user: action.user
      })
    default:
      return state
  }
  return state
}

export default userReducer

...

Ваш магазин останется прежним, а rootReducer должен быть

import { combineReducers } from 'redux';
import userReducer from './reducer'

const rootReducer = combineReducers({
  userReducer
})

export default rootReducer

...

Наконец-то ваше действие

export const SET_USER_DETAILS = 'SET_USER_DETAILS'

export function setUserDetails (user) {
  return {
    type: 'SET_USER_DETAILS',
    user
  }
}

...

Надеюсь, это поможет.