Доступ к избыточному состоянию для проверки

Question

У меня есть функция проверки, которая находится в отдельном файле за пределами моего компонента, и я хочу иметь возможность получить доступ к своему состоянию избыточного хранилища, чтобы проверить, является ли значение допустимым или нет, но я не могу получить доступ к этому состоянию.

Я попытался получить доступ к состоянию хранилища, импортировав его в мой файл validation.js 'import store from '../../client', но это не работает

Как я могу получить доступ к состоянию хранилища в validation.js или естьлучший способ обработки таких проверок с помощью response / redux?

client.jsx

import "@babel/polyfill";

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
// import {registerObserver} from 'react-perf-devtool'
import $ from 'jquery';

import Layout from './components/Layout/Layout.jsx';
import './styles.js'

import configuratorReducer from './reducer/reducer.js';
import configuratorHandler from './handler/handler.js';
import configuratorInit    from './handler/init.js';

import getInitState from './init/initState.js';

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      maxAge: 500,
    }) : compose;

    const enhancer = composeEnhancers(
      applyMiddleware(thunkMiddleware),
      // other store enhancers if any
    );

export const store = createStore(
  configuratorReducer,
  getInitState(),
  enhancer
);


configuratorInit(store);
store.subscribe(() => configuratorHandler.handle(store));

$(document).ready( () => {

  const app = document.getElementById('app');

  ReactDOM.render(
    <Provider store={store}>
      <Layout />
    </Provider>
    , app
  );

});

addToCart.jsx

 class AddToCart extends React.Component {
     render() {
         return(
               <Wrap
        plissee={plissee}
        rollo={rollo}
        lamellen={lamellen}
        holzJalousie={holzJalousie}
        disabled={!this.props.isValid}
      >
         )
     }
 }

const mapStateToProps = (state) => {
  return {
    amount: state.model.amount,
    designation: {
      ...mapDesignationName(state.model.designation.alias),
      alias: state.model.designation.alias
    },
    isValid: configuratorIsValid(state),
    adding: state.model.cart.loading,
    price: state.model.price,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    ...addToCartActions,
  }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(AddToCart);

validation.jsx

   export const operationLengthisValid = (state) => {
  return state.model.operationLength.value ? state.model.operationLength.isValid : null;
};

export const operationMotorPositionIsValid = (state) => {
  return state.model.operationMotorPosition.value ? state.model.operationMotorPosition.isValid : null;
};

export const operationHandlingIsValid = (state) => {
  return state.model.operationHandling.value ? state.model.operationHandling.isValid : null;
};

export const operationOpeningDirectionIsValid = (state) => {
  return state.model.operationOpeningDirection.value ? state.model.operationOpeningDirection.isValid : null;
};

export const configuratorIsValid = (state) => {
  const validations = [windowShapeIsValid, profileColorIsValid, operationTypeIsValid, dimensionIsValid, clothIsValid, fasteningIsValid];
  // rollo
  if (state.model.designation.id === 4) {
    validations.push(chainColorIsValid);
  }
  // lamellen
  if (state.model.designation.id === 5 && state.model.operationType.value === 'Kette und Zugschnur') {
    validations.push(operationLengthisValid,  operationOpeningDirectionIsValid, operationChildProofIsValid)
  }
  else if ((state.model.designation.id === 5 && state.model.operationType.value === 'Funkmotor')) {
    validations.push(operationMotorPositionIsValid, operationHandlingIsValid, operationOpeningDirectionIsValid)
  }


  return !!validations.reduce((prev, curr) => prev && curr(state), true);

Answer 1

Код, который вы предоставили, должен работать.Доступ к хранилищу при работе с приставкой, как и вы, заключается в том, чтобы connect добавить компонент в хранилище и вызвать методы, если это необходимо.

Я бы отметил, что подобная логика должнане следует называть частью жизненного цикла компонента.React (поток) призывает вас иметь компоненты, которые отражают состояние, а не изменяют его.

Я бы рекомендовал вместо этого размещать логику как часть редуктора.Всякий раз, когда это состояние изменяется, повторно запускайте логику проверки и устанавливайте состояние valid в хранилище и привязывайте к нему свой компонент.