ReactJS：未捕获的类型错误：无法读取未定义的属性“订阅”（…）

Question

我正在尝试使用 React 和 Redux 构建一个计时器。

我尽可能地分离关注点。请帮我找到一个可行的解决方案！谢谢。

错误：未捕获的类型错误：无法读取未定义（…）的属性“订阅”

定时器组件

Timer.js

import React, { Component } from 'react';
import timer from '../reducers/index.js';
import store from '../stores/timerStore.js';


 // React Component to display the timer
 class Timer extends Component {
    constructor() {
     super();
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
    }

    start() {
      store.dispatch({
      type: 'START_TIMER',
      offset: Date.now(),
    });
   }
  stop() {
    store.dispatch({
    type: 'STOP_TIMER'
  });
 }
format(time) {
   const pad = (time, length) => {
     while (time.length < length) {
     time = '0' + time;
   }
  return time;
}

time = new Date(time);
let m = pad(time.getMinutes().toString(), 2);
let s = pad(time.getSeconds().toString(), 2);
let ms = pad(time.getMilliseconds().toString(), 3);

 return `${m} : ${s} . ${ms}`;
}

render() {
  return (
    <div>
      <h1>Time: {this.format(this.props.time)}</h1>
      <button onClick={this.props.isOn ? this.stop : this.start}>
       { this.props.isOn ? 'Stop' : 'Start' }
      </button>
    </div>
   );
  }
}



export default Timer;

定时器减速器

    timer.js

   // Initial state for reducer
   const initialState = {
      isOn: false,
      time: 0
    };


    function timer(state = initialState, action) {
       switch (action.type) {
          case 'START_TIMER':
            return {
             ...initialState,
             isOn: true,
             offset: action.offset,
             };

          case 'STOP_TIMER':
           return {
             isOn: false,
             time: state.time
            };

         case 'TICK':
           return {
            ...state,
            time: state.time + (action.time - state.offset),
            offset: action.time
          };

        default:
        return state;
      }
     }

   export default timer;

定时器存储

  timerStore.js

  import { createStore } from 'redux';
  import timer from '../reducers/index.js';

  // Create store using the reducer
  export const store = createStore(timer);

主应用组件

   index.js

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import Timer from './components/Timer.js';
   import store from './stores/timerStore.js';

   const render = () => {
      ReactDOM.render(
      <Timer
          time={store.getState().time}
          isOn={store.getState().isOn}
          interval={store.getState().interval}
       />,
      document.getElementById("app")
     );
    }

    store.subscribe(render);

    var interval = null;
     store.subscribe(() => {
       if (store.getState().isOn && interval === null) {
          interval = setInterval(() => {
           store.dispatch({
        type: 'TICK',
        time: Date.now()
       });
     });
     }
   if (!store.getState().isOn && interval !== null) {
      clearInterval(interval);
      interval = null;
     }
    });

  render();

Answer 1

你有两个不同的问题：

首先，您正在执行存储变量的“命名导出”，但该文件的“默认导入”。您需要确保两者匹配。要么执行export default createStore(timer) 和import store from "./stores/timerStore"，要么执行export const store = createStore(timer) 和import {store} from "./stores/timerStore"。

其次，您真的不应该对商店进行“手动”订阅。 React-Redux 包提供了一个connect 函数，它会生成容器组件，为你管理订阅和更新过程。

另外观察一下，名为“stores”的文件夹表明您正在创建多个 Redux 存储。虽然您可以这样做，但这不是推荐的方法。

更新

而且，看看它，你遇到了第三个问题：<Timer> 组件不会重新渲染，因为它不知道商店已经更新。它只会使用来自ReactDOM.render(<Timer>) 调用的初始值。

根据我刚刚在下面写的评论，你真的应该把它写成几个不同的组件。一个组件应该连接到 Redux 存储并使用 setInterval 管理计时器逻辑，它应该呈现另一个显示计时器信息的组件。