Question

我是Redux的新手，我从未尝试过在我的项目中使用它，因为样板太多了，我很难阅读和理解Redux代码。在2019年10月，他们发布了Redux-Toolkit，旨在解决模板过多的问题并简化Redux的使用，因此目前我将旧应用程序迁移到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
        }
    },
})

然后我输出reducer和类似的动作：

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的用途是什么？调用操作时我应该或不应该在何处使用它？

我真的需要通过将动作包装到dispatch（）调用中来调用动作吗？

0 个答案: