Как подключить Redux для реагирования на функциональный компонент

Question

Я получаю сообщение об ошибке: «TypeError: Невозможно установить свойство 'props' of undefined".

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

import React from 'react'
import { connect } from 'react-redux'


const Logger = (props) => {
    console.log(props.event);

    let logger = []

    if(localStorage.getItem("logger")){
      logger = JSON.parse(localStorage.getItem("logger"))
    }

    let d = new Date();
    let h = d.getHours();
    let m = d.getMinutes();
    let s = d.getSeconds();
    let time = (h + ":" + m + ":" + s)

    logger.push(
      {
        time: time,
        event: props.event
      }
    )

    localStorage.setItem("logger", JSON.stringify(logger))
    props.logger(logger)
}

const mapDispatchToProps = (dispatch) =>{
  return{
    logger: (value) => {
      dispatch({
        type: 'LOGGER',
        payload: value
      })
    }
  }
} 

export default connect(null, mapDispatchToProps)(Logger)

Answer 1

Что вы можете сделать, это превратить это в LoggerService, а не в функциональный компонент.Этот сервис будет иметь метод с именем log, который будет иметь весь код из вашего текущего Logger компонента.Это будет выглядеть следующим образом:

import store from '../path-to-store';

class LoggerService {
  function log(event) {
    let logger = []

    if(localStorage.getItem("logger")){
      logger = JSON.parse(localStorage.getItem("logger"))
    }

    let d = new Date();
    let h = d.getHours();
    let m = d.getMinutes();
    let s = d.getSeconds();
    let time = (h + ":" + m + ":" + s)

    logger.push(
      {
        time: time,
        event: event // note: no 'props' anymore
      }
    )

    localStorage.setItem("logger", JSON.stringify(logger));

    // note: dispatching events directly from store
    store.dispatch((value) => {
      dispatch({
        type: 'LOGGER',
        payload: value
      })
    });
  }
}

Затем, куда бы вам ни понадобилось что-то записать, просто позвоните LoggerService.log(someEvent).Он может быть внутри большой заметки

class MyComponent extends React.Component {
    componentDidMound () => {
        // you have your event here somehow
        LoggerService.log(myEvent);
    }
    // render method and other stuff...
}

: это не проверено, а написано только для иллюстрации концепции.:)