reactjs - アクションをdispatch()呼び出しにラップして呼び出す必要はありますか?

Question

私は Redux を初めて使用し、ボイラープレートが多すぎて Redux コードを読んで理解するのが難しいため、プロジェクトで使用しようとはしませんでした。2019 年 10 月に、過剰なボイラープレートの問題を解決し、Redux の使用を容易にすることを目的とした Redux-Toolkit をリリースしたので、現在、古いアプリケーションを React フックと Redux-Toolkit に移行しています。このように物事を学ぶために）そして、どこでなぜuseDispatchフックを使用する必要があるのか​​ よくわかりません。だから私はこの単純なスライスを持っています:

const formSlice = createSlice({
    name: 'form',
    initialState,
    reducers: {
        setDefaultOrigin: (state, { payload }: { payload: UserGeo }) => {
            state.formsData.segments[0].origin = {
                code: payload.iata,
                text: payload.name,
                type: 'city'
            }
        },
        setWholePlace: (state, { payload }: { payload: { place: SearchHistorySegmentPlace, segment: number, type: 'origin' | 'destination' } }) => {
            state.formsData.segments[payload.segment][payload.type] = payload.place
        },
        setDate: (state, { payload }: { payload: { segment: number, type: 'there' | 'thence', date: string } }) => {
            state.formsData.segments[payload.segment].dates[payload.type] = payload.date
        },
        addForm: (state, { payload }: { payload: ReactMouseEvent }) => {
            if (!payload.currentTarget.classList.contains('disabled')) return

            const newSegment: SearchHistorySegment = {
                origin: state.formsData.segments[state.formsData.mode === 'simple' ? 0 : state.formsData.segments.length - 1].destination,
                destination: {
                    text: '',
                    code: '',
                    type: 'city'
                },
                dates: {
                    there: '',
                    thence: ''
                }
            }

            state.formsData.segments.push(newSegment)

            if (state.formsData.mode === 'simple') {
                state.formsData.mode = 'complex'
            }
        },
        removeForm: (state, { payload }: { payload: ReactMouseEvent }) => {
            if (!payload.currentTarget.classList.contains('disabled')) return

            state.formsData.segments.pop()

            if (state.formsData.segments.length === 1) {
                state.formsData.mode = 'simple'
            }
        },
        goToSimpleMode: state => {
            state.formsData.segments = [state.formsData.segments[0]]
            state.formsData.mode = 'simple'
        },
        handleAutocompleteChange: (state, { payload }: { payload: HandleAutocompleteParams }) => {
            state.formsData.segments[payload.formToChange][payload.type] = payload.segment
        },
        handleSwap: (state, { payload }: { payload: { segment: 0 } }) => {
            const origin = { ...state.formsData.segments[payload.segment].origin }
            const destination = { ...state.formsData.segments[payload.segment].destination }

            state.formsData.segments[payload.segment].origin = destination
            state.formsData.segments[payload.segment].destination = origin
        },
        setShowForms: (state, { payload }: { payload: boolean }) => {
            state.showForms = payload
        }
    },
})

そして、レデューサーとアクションを次のようにエクスポートします。

export const stateSelector = (state: RootState): FormStackState => state.form

export const {
    setDefaultOrigin,
    setWholePlace,
    setDate,
    addForm,
    removeForm,
    goToSimpleMode,
    handleAutocompleteChange,
    handleSwap,
    setShowForms
} = formSlice.actions

次に、これらのアクションをインポートして直接呼び出すだけです。

<button onClick={() => addForm()} />

しかし、フックdispatchによって返される でアクションをラップして呼び出す例をたくさん見ます。useDispatchアクションを呼び出すときの目的とuseDispatch、使用すべき場所と使用すべきでない場所は何ですか?