redux 中的自定义反应钩子返回帮助函数

Question

Imagine the situation you have prepared this custom hook for handling multistep form. The purpose of creating it was to have an easily reusable way to handle common logic for such use-case.

const [steps, currentStep, {totalSteps, isInvalid, isCompleted, isLastStep, isAllStepsCompleted, setActiveStep, handleStepValidation}] = useSteps(['Set preview information', 'Add some content', 'Adjust general settings'])

following are just some helper functions:

• totalSteps
• isInvalid
• isCompleted
• isLastStep
• isAllStepsCompleted
• setActiveStep
• handleStepValidation

Now, this hook can be perfectly used standalone without the need for any redux logic straight away in the root component/container component. Redux comes in for managing the data (what user filled in the form, etc...). For that, I have just a simple reducer.

export default function reducer(state = blogInitialState, action) {
    switch (action.type) {
        case blogActionTypes.BLOG_STORE_TITLE:
            return {...state, data: { ...state.data, title: action.payload}}
        case blogActionTypes.BLOG_STORE_IMAGE:
            return {...state, data: { ...state.data, previewImage: action.payload.previewUrl, previewImageFile: action.payload.file}}
        case blogActionTypes.BLOG_STORE_CONTENT:
            return {...state, }
        case blogActionTypes.BLOG_DELETE_IMAGE_IN_CONTENT:
            return {...state, }
        case blogActionTypes.BLOG_STORE_PUBLICITY_STATUS:
            return {...state, }
        case blogActionTypes.BLOG_STORE_SLUG:
            return {...state, }
        case blogActionTypes.BLOG_SAVE_POST:
            return {...state, }
        default:
            return state
    }
}

Since I want to handle validation of the whole step based on the input data, it feels right to handle the validation inside the reducer, which would mean moving the hook inside the reducer.

So, we are getting into this situation:

export default function reducer(state = blogInitialState, action) {
    const [steps, active, {totalSteps, isInvalid, isCompleted, isLastStep, isAllStepsCompleted, setActiveStep, handleStepValidation}] = useSteps(['Set preview information', 'Add some content', 'Adjust general settings'])

    switch (action.type) {
        case blogActionTypes.BLOG_STORE_TITLE:
            return {...state, data: { ...state.data, title: action.payload}}
        case blogActionTypes.BLOG_STORE_IMAGE:
            return {...state, data: { ...state.data, previewImage: action.payload.previewUrl, previewImageFile: action.payload.file}}
        case blogActionTypes.BLOG_STORE_CONTENT:
            return {...state, }
        case blogActionTypes.BLOG_DELETE_IMAGE_IN_CONTENT:
            return {...state, }
        case blogActionTypes.BLOG_STORE_PUBLICITY_STATUS:
            return {...state, }
        case blogActionTypes.BLOG_STORE_SLUG:
            return {...state, }
        case blogActionTypes.BLOG_SAVE_POST:
            return {...state, }
        default:
            return state
    }
}

The main problem now is that the component loses access to the helper functions: isInvalid , isCompleted , ...

Passing the functions via the state doesn't feel right.

Would you have any suggestions on how to resolve this "stalemate"? :)

Answer 1

Ok, I think I came out with a solution.

I shall create a new "common" reducer for handling step logic and combine it with whatever is needed, ie: basicMultistepReducer and blogPostReducer .

This shall provide some "raw" multistep state into my component, where I load the "raw" state into the hook, which will then provide the helper functions that I can call as usual.

I hope this helps anybody. If I am somewhat unclear or anybody has a better solution, please feel free to write down a comment.