React Native中通过Redux Saga同步设备通知状态至Switch组件以启用应用通知功能的实现方法

我来帮你一步步解决这个问题——要让Switch组件和设备的实际通知状态同步，并用Redux Saga处理异步的权限状态获取，咱们可以按以下步骤操作：

1. 准备权限依赖 #

首先确保你能获取设备的通知权限状态，原生React Native项目可以用react-native-permissions库：

# 安装依赖
npm install react-native-permissions
# 或者用yarn
yarn add react-native-permissions

然后记得配置平台权限：

• iOS：在Info.plist里添加NSNotificationsUsageDescription字段，说明请求通知权限的原因
• Android：在AndroidManifest.xml里添加POST_NOTIFICATIONS权限（适配API 33+）

2. 新增Redux Action类型与创建函数 #

先定义处理权限状态的action类型，方便Saga和Reducer识别：

// actionTypes.js
export const GET_NOTIFICATION_PERMISSION_REQUEST = 'GET_NOTIFICATION_PERMISSION_REQUEST';
export const GET_NOTIFICATION_PERMISSION_SUCCESS = 'GET_NOTIFICATION_PERMISSION_SUCCESS';
export const GET_NOTIFICATION_PERMISSION_FAILURE = 'GET_NOTIFICATION_PERMISSION_FAILURE';

对应的action创建函数：

// globalActionCreators.js
export const getNotificationPermissionRequest = () => ({
  type: GET_NOTIFICATION_PERMISSION_REQUEST,
});

export const getNotificationPermissionSuccess = (isEnabled) => ({
  type: GET_NOTIFICATION_PERMISSION_SUCCESS,
  payload: isEnabled,
});

export const getNotificationPermissionFailure = (error) => ({
  type: GET_NOTIFICATION_PERMISSION_FAILURE,
  payload: error,
});

3. 更新Redux Reducer #

把新的权限状态更新逻辑加到你的reducer配置里：

// 你的reducer配置数组中新增这个项
{ 
  name: 'getNotificationPermissionSuccess', 
  params: ['payload'], 
  function: (state, action) => { 
    return {...state, notification: action.payload}; 
  }, 
},

4. 编写Redux Saga处理权限获取 #

创建一个专门处理通知权限的Saga文件（比如notificationSaga.js），负责异步获取设备权限状态并同步到Redux：

import { call, put, takeLatest } from 'redux-saga/effects';
import Permissions from 'react-native-permissions';
import {
  GET_NOTIFICATION_PERMISSION_REQUEST,
  getNotificationPermissionSuccess,
  getNotificationPermissionFailure,
} from './actionTypes';

// Worker Saga：实际执行权限获取逻辑
function* fetchNotificationPermission() {
  try {
    // 检查当前通知权限状态
    const status = yield call(Permissions.check, Permissions.NOTIFICATIONS);
    // 转换为布尔值：'granted'表示已开启，其他状态视为关闭
    const isEnabled = status === 'granted';
    // 将状态同步到Redux Store
    yield put(getNotificationPermissionSuccess(isEnabled));
  } catch (error) {
    yield put(getNotificationPermissionFailure(error.message));
  }
}

// Watcher Saga：监听权限获取请求
export function* watchNotificationPermission() {
  yield takeLatest(GET_NOTIFICATION_PERMISSION_REQUEST, fetchNotificationPermission);
}

别忘了把这个Saga加到你的Root Saga里，让它能被Redux Saga中间件启动：

// rootSaga.js
import { all } from 'redux-saga/effects';
import { watchNotificationPermission } from './notificationSaga';

export default function* rootSaga() {
  yield all([
    watchNotificationPermission(),
    // 其他已有的Saga...
  ]);
}

5. 在组件中初始化状态并绑定Switch #

在你的组件里，启动时触发权限获取请求，并把Switch的value绑定到Redux中的notification状态：

// 类组件的componentDidMount中触发请求
componentDidMount() {
  this.props.getNotificationPermissionRequest();
}

// 更新mapDispatchToProps，加入新的action
function mapDispatchToProps(dispatch) {
  const { storeNotificationSetting, getNotificationPermissionRequest } = globalActionCreators;
  return {
    storeNotificationSetting: function (isEnabled) {
      return dispatch(storeNotificationSetting(isEnabled));
    },
    getNotificationPermissionRequest: () => dispatch(getNotificationPermissionRequest()),
  };
}

// 更新Switch组件，绑定value属性
<Switch 
  label='Ativar Notificações' 
  name='isNotificationsEnabled' 
  onChange={this.saveSwitchChange} 
  value={this.props.notification} // 绑定Redux中的状态，让开关和设备状态同步
/>

6. 优化Switch切换逻辑（可选） #

如果用户切换开关时，你需要主动请求权限或修正状态，可以修改saveSwitchChange方法：

saveSwitchChange = async (isEnabled) => {
  if (isEnabled) {
    // 用户打开开关时，主动请求通知权限
    const status = await Permissions.request(Permissions.NOTIFICATIONS);
    const actualEnabled = status === 'granted';
    this.props.storeNotificationSetting(actualEnabled);
  } else {
    // 用户关闭开关时，直接同步状态到Redux
    this.props.storeNotificationSetting(false);
  }
};

内容的提问来源于stack exchange，提问作者USER 01