のプロジェクト72 -反応reduxポモドーロ

おい!私は、100を反応させる任務にいます.JSプロジェクト.あなたの質問があれば私のdev . toプロファイルまたは私の更新のために私のdevに従って、アウトに達すること自由に感じなさい.あなたのサポートに感謝!
今日の配備されたアプリケーションへのリンク:Link
レポへのリンク:github
だから私はポモドーロ法の大ファンです.私は、それがよく働くとき、そして、それがそうでない他のとき、若干の回があると思います、しかし、全体的にそれはあなたの時間を包むために素晴らしい方法です、そして、あなたが仕事であなたの時間を通してそれらの必要なブレークを持っていることを確認するために.
今日、私は、反応器Reduxを使用して、react-redux NPMパッケージを使用してReduxストアでカウンター状態を保存しました.
Reduxは、フードの下のコンテキストAPIを使用して構築されているので、最初の手順では、ルートレベルでRespontX [ Property ]コンポーネントにアプリケーションをラップしています.

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import store from './redux'
import './index.css';
import App from './App';

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

次のステップは、あなたの行動と還元を書いて、別々のJavascriptファイルでReduxのために店をつくることです.

import {createStore} from 'redux'

export function decrement() {
  return {
    type: "DECREMENT"
  }
}

export function resetCount() {
  return {
    type: "RESET"
  }
}

export function reducer(count, action) {
  switch (action.type) {
    case ("DECREMENT"):
      return count - 1
    case ("RESET"):
      return 1500
    default:
      return 1500
  }
}

const store = createStore(reducer);

export default store;

次のステップは、実際にあなたの反応するコンポーネントを書き出して、react-reduxからconnect ()メソッドをそれを使用する反応コンポーネントにインポートすることです.

import React,{useState,useEffect} from 'react'
import {connect} from 'react-redux'
import {decrement,resetCount} from '../redux'
import tomatoImage from '../images/tomato.png'

function Pomodoro(props) {
  const [isCounting,setIsCounting] = useState(false)
  const [hasCounted,setHasCounted] = useState(false)
  const [minutes,setMinutes] = useState(0)
  const [seconds,setSeconds] = useState(0)
  const [buttonClass,setButtonClass] = useState("play")

  useEffect(() => {
    setTimeState()
    if (props.count > 0 && isCounting) {
      // is counting and there's time left
      setTimeout(() => {
        props.decrement()
      },1000)
    } else if (props.count > 0 && isCounting) {
      // time has run out
      setIsCounting(false)
      setHasCounted(true)
      setButtonClass("play")
      props.resetCount()
    }
  },[props.count,isCounting])

  function setTimeState() {
    const minsRaw = Math.floor(props.count / 60);
    const secsRaw = props.count - (minsRaw * 60)

    const minsString = minsRaw.toString()
    const secsString = secsRaw.toString()

    const minsFinal = minsString.length < 2 ? "0"+minsString : minsString
    const secsFinal = secsString.length < 2 ? "0"+secsString : secsString

    setMinutes(minsFinal)
    setSeconds(secsFinal)
  }

  function handleClick() {
    // play & has not counted before
    if (!isCounting) {
      setIsCounting(true)
      setButtonClass("pause")
    }
    // pause
    else {
      setIsCounting(false)
      setButtonClass("play")
    }
  }

  return (
    ...
    // excluding JSX here because you probably know what 
    // Pomodoro html elements look like
  )
}

function mapStateToProps(state) {
  return {
    count: state
  }
}

const mapDispatchToProps = {
  decrement: decrement,
  resetCount: resetCount
}

export default connect(mapStateToProps, mapDispatchToProps)(Pomodoro)

このようなプロジェクトのような場合は、より多くの日まで滞在したい、私のTwitterをチェックアウト、私は従ってください!明日また別のプロジェクトにお会いしましょう.