Redux中如何定义状态间关联逻辑？附状态约束示例

要实现你描述的状态规则，核心思路是保存state_b的原始取值，在进入限制模式时强制修改state_b，离开时恢复原始值，具体做法分这几步：

1. 扩展状态结构 #

在Redux的初始状态里，除了state_a和state_b，新增一个previous_state_b字段，用来存储state_b被限制前的真实值。初始时这个字段可以和state_b的初始值保持一致：

const initialState = {
  state_a: 'mode_1',
  state_b: true,
  previous_state_b: true
};

2. 处理state_a的变更逻辑 #

当修改state_a的action触发时，在reducer里根据新值判断执行逻辑：

• 如果新的state_a是'mode_2'：先把当前的state_b存入previous_state_b，再强制将state_b设为false
• 如果新的state_a不是'mode_2'：把state_b恢复为previous_state_b里存的原始值

示例reducer代码：

function appReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_STATE_A':
      const newStateA = action.payload;
      if (newStateA === 'mode_2') {
        return {
          ...state,
          state_a: newStateA,
          previous_state_b: state.state_b,
          state_b: false
        };
      } else {
        return {
          ...state,
          state_a: newStateA,
          state_b: state.previous_state_b
        };
      }
    // 其他action的处理逻辑
    default:
      return state;
  }
}

3. 处理state_b的直接修改逻辑 #

当用户主动修改state_b时，只有在state_a不是'mode_2'的情况下才允许修改，同时要同步更新previous_state_b的值；如果当前处于'mode_2'，直接忽略修改请求即可：

// 在reducer的switch里新增case
case 'SET_STATE_B':
  if (state.state_a !== 'mode_2') {
    return {
      ...state,
      state_b: action.payload,
      previous_state_b: action.payload
    };
  }
  // 处于mode_2时不允许修改，返回原状态
  return state;

4. 用Redux Toolkit简化代码（推荐） #

如果用Redux官方推荐的Redux Toolkit，写法会更简洁，逻辑和上面完全一致：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  state_a: 'mode_1',
  state_b: true,
  previous_state_b: true
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setStateA: (state, action) => {
      const newStateA = action.payload;
      if (newStateA === 'mode_2') {
        state.previous_state_b = state.state_b;
        state.state_b = false;
      } else {
        state.state_b = state.previous_state_b;
      }
      state.state_a = newStateA;
    },
    setStateB: (state, action) => {
      if (state.state_a !== 'mode_2') {
        state.state_b = action.payload;
        state.previous_state_b = action.payload;
      }
    }
  }
});

export const { setStateA, setStateB } = appSlice.actions;
export default appSlice.reducer;

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