使用Redux表单设置默认选中的单选按钮

// 定义状态属性
const initialState = {
  selectedOption: 'option1' // 默认选中的单选按钮的值
};

// 创建动作
const setSelectedOption = (option) => {
  return {
    type: 'SET_SELECTED_OPTION',
    payload: option
  };
};

// 创建动作创建器
const setSelectedOptionAction = (option) => {
  return (dispatch) => {
    dispatch(setSelectedOption(option));
  };
};

// 创建Reducer
const selectedOptionReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_SELECTED_OPTION':
      return {
        ...state,
        selectedOption: action.payload
      };
    default:
      return state;
  }
};

// 创建存储
const store = Redux.createStore(selectedOptionReducer);

// 在应用程序中使用Redux的Provider组件
ReactDOM.render(
  <Redux.Provider store={store}>
    <App />
  </Redux.Provider>,
  document.getElementById('root')
);

// 在单选按钮组件中使用Redux的connect函数
const RadioButton = ({ selectedOption, setSelectedOptionAction }) => {
  const handleOptionChange = (event) => {
    setSelectedOptionAction(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        Option 2
      </label>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    selectedOption: state.selectedOption
  };
};

const mapDispatchToProps = {
  setSelectedOptionAction
};

const ConnectedRadioButton = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(RadioButton);