0

我是 Redux 的新手，我从来没有努力在我的项目中使用它，因为有太多的样板文件，而且我很难阅读和理解 Redux 代码。2019 年 10 月，他们发布了 Redux-Toolkit，旨在解决样板文件过多的问题并使 Redux 的使用更容易，所以目前我正在将我的旧应用程序迁移到 React hooks 和 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调用动作时我应该或不应该使用它的目的是什么？

4

0 回答 0