redux-toolkit-form

    1.2.1 • Public • Published

    INTRODUCTION

    The form handler as a slice of @reduxjs/toolkit . You can handle form with your redux toolkit easily.

    installation

    npm install redux-toolkit-form
    

    - pre-requirement

    You have to setup @reduxjs/toolkit with your project

    import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
    import RootReducer from "./CombineReducer";
    
    const store = configureStore({
        reducer: RootReducer,
        middleware: getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: ['form/initForm', 'form/changeValue', "form/setErrors", "form/validateForm"]
            }
    
        })
    
    })
    
    
    export default store

    Ensure your middleware have this snippet

    - Now configure your combine reducer

    import { combineReducers } from "@reduxjs/toolkit";
    import FormReducer from "redux-toolkit-form";
    
    
    const RootReducer = combineReducers({
        form: FormReducer
    })
    
    
    export default RootReducer

    You should register FormReducer with form key in combimeReducers

    Now you are done to work with it.

    Usages

    This package come with some action and selector to handle form from component.

    - Actions

    You have to dispatch this actions to handle form

    import { changeValue, initForm, validateForm} from "redux-toolkit-form";

    - Selector functions

    You have to use useSelector with this selector function to get values, errors, valid status of form

    import { formErrors, formValues, isValid } from "redux-toolkit-form";

    Example

    In the component with inputs

    import { useDispatch, useSelector } from "react-redux";
    import { changeValue, formValues, initForm, formErrors, isValid, setErrors, validateForm} from "redux-toolkit-form";
    import { useEffect } from "react";
    
    // import validators
    import emailValidate from "./Validators/emailValidate";
    import lengthValidate from "./Validators/lengthValidate";
    
    
    function App() {
    
        const dispatch = useDispatch()
    
    
        // first define the form structure to init to store
        const form = {
            values : {
                email: {
                    // if the field is required
                    required: true,
                    // all vlidators have to pass in this array
                    validators: [
                        new emailValidate('Email is not valid!')
                    ]
                },
                username: {
                    required: true,
                    validators:  [
                        new lengthValidate(4, 'min', 'Minimum 4 character allow!'),
                        new lengthValidate(15, 'max', "Maximum 15 character allow!"),
                    ]
                },
                mobile: {
                    // this field is not required
                    required: false,
                    
                    // if no validators required
                    validators: []
                }
            }
        }
    
    
        // fire initForm action with form structure 
        // this will set the form errors and value in store
        useEffect(() => {
            dispatch(initForm(form))
        }, [])
    
    
    
    
        // this selector return the form errors
        const formError = useSelector(formErrors)
        
        
        // this selector return the form valid status true or false
        const ValidStatus = useSelector(isValid)
        
        // this selector return all the value of form
        const FormValue = useSelector(formValues)
    
    
        // you can validate form by dispatch validateForm() action
        dispatch(validateForm())
    
        
        // you can set custome error by fire setErrors fucntion
        dispatch(setErrors({
            email: 'Emali already exists!',
            username: 'Invalid username'
        }))
        // this will help you set dynamic error from server
    
    
    
        return (
            <div className={'bg-blue-300 h-screen flex content-center justify-center flex-wrap'}>
                <div className="bg-blue-50 md:w-1/3 sm:w-11/12  w-full rounded-sm shadow-md p-2">
                    <h2 className={'form-title'}>Login</h2>
                    <div className="my-2 px-1">
                        <label className={'label-control'}>Email</label>
    
    
                        {/** Here we have to name the input field as defined structure
                            
                            we have to fire changeValue with param event in dispatch like this to change value in store
                            
                            this will track all error on every change based on validators
                         */}
                        <input autoComplete={'off'} type={'text'} className={'input-control'} onChange={(e) => dispatch(changeValue(e))} name={'email'} placeholder={'Email address'} />
                        
                        
                        {/**
                         track on error message like this
                            */}
                        <span className={'error-feedback'}>{formError.email}</span>
    
                    </div>
    
                    <div className="my-2 px-1">
                        <label className={'label-control'}>Username</label>
                        
                        
                        {/** here another exmple */}
                        <input onChange={(e) => dispatch(changeValue(e))} type={'text'} className={'input-control'} name={'username'} placeholder={'Username'} />
                            
                            
                        <span className={'error-feedback'}>{formError.username}</span>
    
                    </div>
    
                    <div className="my-2 px-1">
                        <label className={'label-control'}>Mobile</label>
                        <input type={'text'} className={'input-control'} onChange={(e) => dispatch(changeValue(e))} name={'mobile'} placeholder={'Mobile'} />
                    </div>
    
                    <div className="my-2 px-1">
                        <button onClick={() => dispatch(validateForm())} className="button w-full text-white bg-blue-500 my-2">Submit</button>
                    </div>
    
                </div>
            </div>
        );
    }
    
    export default App;

    Validator Setup

    For create validator with this package you have to follow this rules Please follow the exact same as this validator to working with this package

    In this example we re showing one file. You can separate file to make code reusable

    class lengthValidate{
        
        
        constructor(length, minOrMax, message='') {
            this.length = length
            this.minOrMax = minOrMax
            this.message = message
        }
    
        /** 
         * every validator should have this validate method
         * automatically input will inject from store the exact value form this key
         * return error message
         * */
        validate(value){
            if(this.minOrMax === 'min'){
                if(value.length < this.length){
                    return this.message || 'Minimum '+ this.length + ' character allow!'
                }
            }
    
            if(this.minOrMax === 'max'){
                if(value.length > this.length){
                    return this.message || `Maximum ${this.length} character allow!`
                }
            }
    
    
            return ''
        }
    }
    
    
    // we are not showing full component hope you will get it
    function App() {
    
    
    
        // first define the form structure to init to store
        const form = {
            values: {
    
                username: {
                    required: true,
                    validators: [
                        new lengthValidate(4, 'min', 'Minimum 4 character allow!'),
                        new lengthValidate(15, 'max', "Maximum 15 character allow!"),
                    ]
                }
            }
        }
    
    }

    Install

    npm i redux-toolkit-form

    DownloadsWeekly Downloads

    3

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • gargximran