使用Redux和Redux Saga的React Native登录模板

import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { connect } from 'react-redux';
import { put, call } from 'redux-saga/effects';
 
// 登录操作的action creator
export const loginAction = (username, password) => ({
  type: 'LOGIN',
  payload: { username, password }
});
 
// 登录操作的saga
export function* loginSaga({ payload: { username, password } }) {
  try {
    // 假设fetchLogin是一个异步登录函数
    const token = yield call(fetchLogin, username, password);
    yield put({ type: 'LOGIN_SUCCESS', payload: { token } });
  } catch (error) {
    yield put({ type: 'LOGIN_FAILURE', payload: { error } });
  }
}
 
class LoginScreen extends React.Component {
  state = { username: '', password: '' };
 
  handleLogin = () => {
    const { loginAction } = this.props;
    loginAction(this.state.username, this.state.password);
  };
 
  render() {
    return (
      <View>
        <TextInput
          placeholder="Username"
          onChangeText={username => this.setState({ username })}
          value={this.state.username}
        />
        <TextInput
          placeholder="Password"
          onChangeText={password => this.setState({ password })}
          value={this.state.password}
          secureTextEntry
        />
        <Button title="Login" onPress={this.handleLogin} />
      </View>
    );
  }
}
 
// 连接Redux
export default connect(null, { loginAction })(LoginScreen);

这个代码实例展示了如何在React Native应用中使用Redux和Redux Saga来实现一个简单的登录功能。代码中定义了一个loginAction的action creator，以及一个loginSaga的saga，用于处理登录操作。LoginScreen组件负责展示用户界面，并在用户点击登录按钮时触发登录操作。最后，通过connect函数将组件连接到Redux store，并且通过props传递loginAction。