Доступ к функциям восстановления

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

Фрагмент кода: -

import { connect } from 'react-redux';

function log(logMessage) {
    const {environment} = this.props;
    console.debug('environment' + environment + logMessage ); 
    ....
}

function mapStateToProps(state) {
    return {
        environment : state.authReducer.environment
    };
}

export default function connect(mapStateToProps)(log);

У меня есть много компонентов, которые присоединяют класс через connect, я могу присоединить функции через connect()?

Ответы

Ответ 1

Изменить 1

Some_File.js

import store from './redux/store.js';

function aFunction(){
   var newState =store.getState();
   console.log('state changed');
}

store.subscribe(aFunction)

Я предполагаю, что вы создали хранилище и редукторы, как ожидает сокращение.

~~~~~~~~~~~~~~~

Оригинальный ответ начинается

Это своего рода хак, Я не знаю, что вы делаете, поэтому я не могу сказать, что вам нужно, или вы не должны этого делать, но вы можете сделать это таким образом. Я скопировал некоторые из вашего кода с некоторыми изменениями.

Class XYZ extends React.Component{
     componentWillReceiveProps(props){
       //in your case this.props.storeCopy is redux state.
      //this function will be called every time state changes
     }

     render(){
        return null;
     }
}



function mapStateToProps(state) {
    return {
        storeCopy : state
    };
}

export default function connect(mapStateToProps)(XYZ);

Поместите этот компонент где-то наверху, можно просто внутри provider, всякий раз, когда состояние изменяет этот componentWillReceiveProps этого компонента, будет вызываться.

Ответ 2

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

Существует промежуточное программное обеспечение logger для сокращения, которое вы, возможно, не захотите посмотреть, оно делает то, что вы пытаетесь достичь.

Чтобы использовать его, просто передайте его в качестве промежуточного программного обеспечения в ваш магазин:

import createLogger from 'redux-logger';

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

Более правильным способом отладки приложения redux является использование React Dev Tools, если вы используете Chrome, я рекомендую вам использовать React Dev Tools Extension. Просто установите его и используйте его как промежуточное ПО

let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());

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

Ответ 3

Да. Вы можете подключать функции через соединение, как показано ниже:

  const mapDispatchToProps = (dispatch) => {
     return {
       testFunction: (param1) => dispatch(testFunction(param1)),
       testFunction1: () => dispatch(testFunction1())
    };
 };

 export default function connect(mapStateToProps, mapDispatchToProps)(log);

Ответ 4

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

import store './redux/store';

function getStoreDetails() {
   console.log(store.getState());
}