javascript - 使用 Redux Middleware Thunk 构建计时器(setInterval 和 clearInterval)

Question

我正在尝试使用按钮构建计时器，单击以启动和停止计时器。我一直在尝试不同的方法并阅读 StackOverflow 过去的问题，但仍然无法让它在我的应用程序上运行。我已经设置了applyMiddleware(thunk)到商店。
基本上我有一个按钮

      <button onClick={props.timerHandler}>
        {props.isRunning ? "TIMER STOP" : "TIMER START"}
      </button>

props.timerHandler是将 isRunning 值更改为 true 和 false。
在 reducer 功能中，我尝试过这样的事情，但它不起作用

    case "TIMER":
      let timer = null;
      clearInterval(timer);
      if (state.isRunning === true)
        timer = setInterval(() => {
          return state + 1;
        }, 1000);
      return {
        ...state,
        isRunning: !state.isRunning,
      };

在实践中，我尝试了这样的代码，并导出以在我的 App.js 中使用，但也无法正常工作。

export const timer = () => (dispatch, getState) => {
  let timer = null;
  clearInterval(timer);
  if (getState().isRunning === true)
    timer = setInterval(() => {
      dispatch(incAction());
    }, 1000);
};

请帮忙，如果需要澄清，请告诉我。谢谢

Answer 1

您应该将副作用放在 thunk 中，而不是放在 reducer 中，因为 reducer 必须是同步纯函数。
以下是处理 thunk 中的副作用的示例:

const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { createSelector } = Reselect;

const initialState = {
  timer: { isRunning: false, time: 0 },
};
//selectors
const selectTimer = (state) => state.timer;
const selectIsRunning = createSelector(
  [selectTimer],
  (timer) => timer.isRunning
);
const selectTime = createSelector(
  [selectTimer],
  (timer) => timer.time
);
//action types
const TOGGLE = 'TOGGLE';
const UPDATE = 'UPDATE';
//action creators
const toggle = () => ({ type: TOGGLE });
const update = () => ({ type: UPDATE });

//thunks
const toggleTimer = () => (dispatch, getState) => {
  dispatch(toggle());
  const isRunning = selectIsRunning(getState());
  if (isRunning) {
    dispatch(recurUpdate());
  }
};
const recurUpdate = () => (dispatch, getState) =>
  setTimeout(() => {
    const isRunning = selectIsRunning(getState());
    if (isRunning) {
      dispatch(update());
      //recursively dispatch this thunk
      dispatch(recurUpdate());
    }
  }, 1000);
const reducer = (state, { type }) => {
  if (type === TOGGLE) {
    return {
      ...state,
      timer: {
        ...state.timer,
        isRunning: !state.timer.isRunning,
      },
    };
  }
  if (type === UPDATE) {
    return {
      ...state,
      timer: { ...state.timer, time: state.timer.time + 1 },
    };
  }
  return state;
};
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(
      ({ dispatch, getState }) =>
        (next) =>
        (
          action //simple thunk implementation
        ) =>
          typeof action === 'function'
            ? action(dispatch, getState)
            : next(action)
    )
  )
);
const App = () => {
  const dispatch = useDispatch();
  const isRunning = useSelector(selectIsRunning);
  const time = useSelector(selectTime);
  const timerHandler = React.useCallback(
    () => dispatch(toggleTimer()),
    [dispatch]
  );
  return (
    <div>
      <button onClick={timerHandler}>
        {isRunning ? 'TIMER STOP' : 'TIMER START'}
      </button>
      Time:{time}
    </div>
  );
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>

<div id="root"></div>

作为旁注；最好存储计时器开始的时间并从当前时间中减去它(Date.now())，您应该使用 Math.ciel 或 Math.floor 以便获得精确的秒数并使用 requestAnimationFrame 运行 thunk .您将获得更精确的秒数，作为您从依赖 setTimeout 获得的值，但是当您实现暂停/继续时，它确实变得复杂(您必须将暂停时间添加到开始时间)。