Redux без действий

Question

я использую React с Redux. У меня есть два вопроса: 1. Я не использую никаких действий. это плохая картина? 2. также при вызове метода отправки я отправляю данные объекта с индексом ключа в редуктор

 dispatch({
            type: 'SHOW',
            key: obj, // send obj object to reducer
          });

и через редуктор:

switch (action.type) {
    case 'SHOW':
      return {
        ...state,
        modalVisible: 'SHOW',
        dataItem: action.key,
      };

передача данных объекта компоненту слушателя:

 const items = store.getState().schemaFormReducer.dataItem;

мое решение неверно? Есть ли лучшее и более правильное решение?

Код Compelete:

Редуктор:

  function schemaFormReducer(state, action) {
      state = {
        modalVisible: 'Initial',
        dataItem: null,
      };
      switch (action.type) {
        case 'SHOW':
          return {
            ...state,
            modalVisible: 'SHOW',
            dataItem: action.key,
          };
        case 'HIDE':
          return {
            ...state,
            modalVisible: 'HIDE',
            dataItem:null
          };
        default:
          return state;
      }
    }

export default schemaFormReducer;

Хранить:

import { createStore, combineReducers } from 'redux';
import historyReducer from './pims/reducers/historyReducer';
import schemaReducer from './pims/reducers/schemaReducer';
import schemaFormReducer from './pims/reducers/schemaFormReducer';

const rootReducer = combineReducers({
    historyReducer,
    schemaReducer,
    schemaFormReducer,
});

const store = createStore(rootReducer);

export default store;

компонент

const SchemaForm = ({ onModalShow }) => {

some codes...
....
....

const mapStateToProps = state => {
  return {
    schemaForm: state.schemaFormReducer.modalVisible,
  };
};
const mapDispatchToProps = dispatch => {
  return {
    onModalShow: obj => {
      dispatch({
        type: 'SHOW',
        key: obj,
      });
    },
    onModalHide: () => {
      dispatch({
        state: 'HIDE',
      });
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(SchemaForm);
}
}

Answer 1

В вашем действии 'SHOW' имя ключа для переменной с данными, не совпадающей с оригинальным стилем избыточного кода, для этого лучше использовать payload: obj.

В вашем редукторе root вы можете использовать сокращенные имена для разных редукторов:

constrootReducer = combineReducers({
history: historyReducer,
schema: schemaReducer,
schemaForm: schemaFormReducer,
});

В этом случае лучше использовать тип имени для первого аргумента в ваших действиях:

const mapDispatchToProps = dispatch => {
  return {
    onModalShow: obj => {
      dispatch({
        type: 'SHOW', 
        key: obj, //payload
      });
    },
    onModalHide: () => {
      dispatch({
        state: 'HIDE', //type
      });
    },
  };
};

Избегайте использования этого:

const items = store.getState().schemaFormReducer.dataItem;

Ваш редуктор должен возвращать только новое состояние. Объясните, пожалуйста, зачем вам эта строка?

Еще один совет: попробуйте использовать useSelector, useDispatch, эти функции помогут вам упростить код mapDispatchToProps и mapStateToProps и сделать то же самое в более удобочитаемом виде.

https://react-redux.js.org/api/hooks