왜

https://react-redux.js.org/tutorials/quick-start

react-redux 튜토리얼과 카운터 앱 만들기
증가/감소 は実装して UI に組み込んだが
incrementByAmount は実装の途中で終わっていたので
その続きを codesandbox のrinkから追って進める.

incrementByAmount を実際に使えるようにする

https://codesandbox.io/s/github/reduxjs/redux-essentials-counter-example/tree/master/?from-embed=&file=/src/features/counter/Counter.js:359-423

Counter.js로

import React, { useState } from 'react';
import { decrement, increment, incrementByAmount } from './counterSlice'

incrementByAmount で 使う増加変数のため에 useState をinport
incrementByAmount の reducer 本體をinport

  const [incrementAmount, setIncrementAmount] = useState('2');

増加量을 useState を使って 2로 初期化

        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={e => setIncrementAmount(e.target.value)}
        />

増加量を変更できるロジックと UI を書き

        <button
          onClick={() =>
            dispatch(incrementByAmount(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>

クリックしたら増加量である incremenAmount の数だけ
incrementByAmount가동
incrementAmount に Number() を当てた値が 0 であれば増加量が 0 になる에라한드링も当てる





これで、 incrementByAmount는 は実装できた.

incrementAsync を実装する

同じく codesandbox を参照.

CounterSlice.js

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export const incrementAsync = (amount) => (dispatch) => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount))
  }, 1000)
}

증가, 감소, incrementByAmount
これらを 수출 した後に

別で incrementAsnyc を定義して export する.
amount の他に、dispatch まで引数から受け取って
中으로 setTimeout を使い、incrementByAmount を 파견 している.

なぜ外部に書いているかは不明.

를 Counter.js로

import { decrement, increment, incrementByAmount, incrementAsync } from './counterSlice'

<button
  onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
>
  Add Async
</button>

incrementAsnync を追加で読み込み、
incrementByAmount 와 同様に incrementAmount を数値時にしてエラー処理して incrementAsync を動かすボtanを作る



これで、押してから 1 秒後に反映される加算ボタンができた.

incrementAsync を reducers の中身に作っ て失敗した

counterSlide の外部 にわざわざ新しく incrementAsync を作って, そこで dispatch し て counterSlide の中の incrementByAmount 作るのは無駄に思えた.

なので reducers の内部から incrementbyAmount を呼ぶ
incrementAsyncInside を作ってみた.

  reducers: {
    incrementByAmount: (state, action) => {
      console.log(`increment BY Async worked`);
      state.value += action.payload
    },
    incrementAsyncInside: (state, action) => {
      setTimeout(() => {
        incrementByAmount(state, action)
      }, 1000)
    }

상태 와 행동 をそのまま渡した.
そして 수출입 してボtanを作ってsettしたが、
こっちは動かなかった.
이 console.log 의 메시 지모 表示 가 없습니다.
同じ reducers の一つから別の reducer は呼び出せないと推測する.

まとめ

incrementByAmount 는 incrementAmount 의 로카르스트레이트를 생성해
その値を引数に渡して呼び出すだけなので楽だった.

incrementAsyncInside は、incrementByAmount を利사용 가능하게
감속기 の外から 파견 で呼び出す必要があった.