React Native + Redux：多元素选中切换与动态图片渲染问题

嘿，我来一步步帮你搞定这两个问题，很清晰的需求，咱们慢慢捋：

1. 在Reducer中实现选中状态切换 #

首先得确定你需要的是单选（同一时间只能选中一个单元格）还是多选（可以选中多个），两种情况的Reducer实现略有不同：

情况1：单选模式（推荐，如果你希望每次只选中一个） #

初始状态我们只需要记录当前选中的单元格ID，默认是null（没有选中任何单元格）：

export default (state = { selectedCellId: null }, action) => {
  switch(action.type) {
    case 'select_cell': {
      // 逻辑：如果点击的是当前已选中的单元格，就取消选中；否则切换到新的单元格
      const newSelectedId = state.selectedCellId === action.payload 
        ? null 
        : action.payload;
      return {
        ...state, // 解构原有状态，保证immutable
        selectedCellId: newSelectedId
      };
    }
    default:
      return state; // 其他action直接返回原状态
  }
};

情况2：多选模式（允许同时选中多个单元格） #

初始状态需要包含所有8个单元格的ID，每个默认值为false（未选中）：

// 假设你的8个单元格ID分别是rain, sun, cloud, snow, wind, fog, thunder, hail
export default (state = {
  rain: false,
  sun: false,
  cloud: false,
  snow: false,
  wind: false,
  fog: false,
  thunder: false,
  hail: false
}, action) => {
  switch(action.type) {
    case 'select_cell': {
      // 逻辑：切换当前点击单元格的选中状态（选中变未选中，反之亦然）
      return {
        ...state,
        [action.payload]: !state[action.payload] // 用ES6计算属性名定位对应单元格
      };
    }
    default:
      return state;
  }
};

2. 根据状态渲染新图片 #

首先你需要把Redux的状态映射到组件的props里，用connect函数（来自react-redux），然后在每个<TouchableWithoutFeedback>元素里根据状态切换图片和样式：

第一步：连接组件与Redux #

先导入必要的模块，然后映射状态和dispatch：

import { connect } from 'react-redux';
import { selectCell } from './你的action文件路径';

// 把Redux state映射到组件props
const mapStateToProps = (state) => {
  // 单选模式用这个：
  return { selectedCellId: state.selectedCellId };
  // 多选模式用这个：
  // return { cellStates: state };
};

// 把action映射到props
const mapDispatchToProps = {
  selectCell
};

// 最后导出连接后的组件
export default connect(mapStateToProps, mapDispatchToProps)(你的组件名称);

第二步：在组件中根据状态渲染 #

假设你已经导入了选中状态的图片（比如RainSelected），然后修改每个单元格的代码：

单选模式下的渲染：

<TouchableWithoutFeedback onPress={()=>this.props.selectCell('rain')}> 
  <Row style={[
    styles.orangish,
    styles.cell,
    // 如果当前单元格是选中状态，添加选中样式（可选）
    this.props.selectedCellId === 'rain' && styles.selectedCellStyle
  ]}> 
    {/* 根据选中状态切换图片 */}
    <Image source={this.props.selectedCellId === 'rain' ? RainSelected : Rain} /> 
  </Row> 
</TouchableWithoutFeedback>

多选模式下的渲染：

<TouchableWithoutFeedback onPress={()=>this.props.selectCell('rain')}> 
  <Row style={[
    styles.orangish,
    styles.cell,
    this.props.cellStates.rain && styles.selectedCellStyle
  ]}> 
    <Image source={this.props.cellStates.rain ? RainSelected : Rain} /> 
  </Row> 
</TouchableWithoutFeedback>

这样点击单元格的时候，Redux会更新状态，组件会自动根据新状态重新渲染对应的图片和样式啦～

内容的提问来源于stack exchange，提问作者Sai Krishna