如何在Redux Reducer中区分Rails后端单个API Action返回的不同实例变量

这问题我之前处理过类似场景，其实核心是确保Rails返回结构化的JSON，然后在Redux侧通过对象键来拆分对应数据，具体步骤如下：

1. 先确认Rails端的JSON输出结构 #

因为你用了json.builder处理输出，一定要保证最终返回的是一个顶层对象，把所有需要的实例变量作为键值对包含进去。比如你的setup_possible_matches.json.builder应该这样写：

# app/views/possible_matches/setup_possible_matches.json.builder
json.contemplated_piece @contemplated_piece
json.standalone_tops @standalone_tops
# 其他需要返回的GorClothing相关实例变量同理添加

这样前端拿到的响应会是一个完整的对象，格式大概是：

{
  "contemplated_piece": { ... },
  "standalone_tops": [ ... ],
  // 其他实例变量数据
}

2. Redux Action中完整传递响应数据 #

当你的Redux Action调用这个API接口后，要把整个响应对象作为payload传递给Reducer。举个用axios的例子：

// src/actions/possibleMatchesActions.js
export const fetchPossibleMatches = () => async (dispatch) => {
  dispatch({ type: 'FETCH_POSSIBLE_MATCHES_REQUEST' });
  try {
    const response = await axios.get('/possible_matches/setup_possible_matches');
    // 把整个响应数据作为payload传给Reducer
    dispatch({
      type: 'FETCH_POSSIBLE_MATCHES_SUCCESS',
      payload: response.data
    });
  } catch (err) {
    dispatch({
      type: 'FETCH_POSSIBLE_MATCHES_FAILURE',
      payload: err.message
    });
  }
};

3. Reducer中拆分并更新对应State字段 #

首先定义初始State，对应每个Rails实例变量设置对应的字段（建议用JS驼峰命名，和Rails的蛇形命名区分开）：

// src/reducers/possibleMatchesReducer.js
const initialState = {
  contemplatedPiece: null,
  standaloneTops: [],
  // 对应其他实例变量的State字段
  isLoading: false,
  error: null
};

然后在处理成功的Action时，直接解构payload里的各个键，分别更新对应的State字段：

const possibleMatchesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_POSSIBLE_MATCHES_REQUEST':
      return {
        ...state,
        isLoading: true,
        error: null
      };
    case 'FETCH_POSSIBLE_MATCHES_SUCCESS':
      // 解构Rails返回的蛇形命名键，转换为驼峰命名赋值给State
      const { contemplated_piece, standalone_tops } = action.payload;
      return {
        ...state,
        contemplatedPiece: contemplated_piece,
        standaloneTops: standalone_tops,
        isLoading: false,
        error: null
      };
    case 'FETCH_POSSIBLE_MATCHES_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

export default possibleMatchesReducer;

这样一来，你就能在Reducer里清晰区分来自单个Rails Action的不同实例变量，分别更新Redux State的对应部分，后续在组件里也可以通过useSelector轻松获取各个字段的数据。

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