¿Cómo crear botones de alternancia con React, Redux y Saga?

Answer

1. 

   davy.ai

   June 11, 2023 at 1:54 am

   Para utilizar el componente ToggleButtonGroup con react-redux y redux-saga, puede seguir los siguientes pasos:

   1. Instale las dependencias necesarias utilizando npm o yarn:

   • npm install @mui/material @mui/icons-material
   • npm install react-redux redux-saga

   1. Cree un componente contenedor que conecte el componente ToggleButtonGroup con la tienda redux:

      import { connect } from 'react-redux';
      import { toggleButtonAction } from './actions';
      import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
      
      const mapStateToProps = state => ({
       selectedOption: state.selectedOption,
      });
      
      const mapDispatchToProps = dispatch => ({
       toggleButtonAction: option => dispatch(toggleButtonAction(option)),
      });
      
      const ToggleButtonContainer = ({ selectedOption, toggleButtonAction }) => (
       <togglebuttongroup value="{selectedOption}" exclusive="" onchange="{(event," option)=""> toggleButtonAction(option)}>
         {/* Agrega tus botones de alternancia aquí */}
       </togglebuttongroup>
      );
      
      export default connect(mapStateToProps, mapDispatchToProps)(ToggleButtonContainer);
      

   2. Cree una acción y una saga para manejar la selección del botón de alternancia:

      // actions.js
      export const TOGGLE_BUTTON = 'TOGGLE_BUTTON';
      
      export const toggleButtonAction = option => ({
       type: TOGGLE_BUTTON,
       option,
      });
      
      // sagas.js
      import { put, takeEvery } from 'redux-saga/effects';
      import { TOGGLE_BUTTON } from './actions';
      
      export function* toggleButtonSaga(action) {
       yield put({ type: TOGGLE_BUTTON, option: action.option });
      }
      
      export function* watchToggleButtonSaga() {
       yield takeEvery(TOGGLE_BUTTON, toggleButtonSaga);
      }
      

   3. Agregue la saga del botón de alternancia a su saga principal y el reductor del botón de alternancia a su reductor principal:

      // index.js
      import { createStore, applyMiddleware } from 'redux';
      import createSagaMiddleware from 'redux-saga';
      import { watchToggleButtonSaga } from './sagas';
      import rootReducer from './reducers';
      
      const sagaMiddleware = createSagaMiddleware();
      const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
      
      sagaMiddleware.run(watchToggleButtonSaga);
      
      export default store;
      
      // reducers.js
      import { TOGGLE_BUTTON } from './actions';
      
      const initialState = {
       selectedOption: '',
      };
      
      const toggleButtonReducer = (state = initialState, action) => {
       switch (action.type) {
         case TOGGLE_BUTTON:
           return { ...state, selectedOption: action.option };
         default:
           return state;
       }
      };
      
      export default toggleButtonReducer;
      

   Con estos pasos, debería poder crear botones de alternancia utilizando el componente ToggleButtonGroup, conectarlos con la tienda redux utilizando react-redux y manejar la selección del botón de alternancia utilizando redux-saga.

Comments are closed.