useReducer 与 useState

Source: Dev.to

useState

const [contactName, setContactName] = useState("");
const [contactImage, setContactImage] = useState(null);
const [contactImageUrl, setContactImageUrl] = useState(null);

function handleImageUpload(e) {
    const file = e.target.files[0];
    const fileName = e.targe.files[0].name;

    if (!file) return;

    const matchRgx = fileName.match(/\.(jpg|png|jpeg)/);
    if (matchRgx != null) {
        setContactImageUrl(URL.createObjectURL(e.target.files[0]));
    } else {
        setContactImage(null);
        setContactImageUrl(null);
    }
}

function handleForm(e) {
    e.preventDefault();
    window.alert("Successfully added a contact!");
}

return (
    
        
            Name:
             setContactName(e.target.value)}
            />

            Image:
            

            

            Submit
        
    
);

useReducer

const initialFormState = { contactName: "", contactImage: null, contactImageUrl: null };

function reducer(state, action) {
    if (action.type === "setState") {
        return {
            ...state,
            [action.field]: action.value,
        };
    } else if (action.type === "ImageUpload") {
        return {
            ...state,
            contactImage: action.file,
            contactImageUrl: action.url,
        };
    }
    return state;
}

const ReducerHook = () => {
    const [state, dispatch] = useReducer(reducer, initialFormState);

    function handleImageUpload(e) {
        const file = e.target.files[0];
        const fileName = e.targe.files[0].name;

        if (!file) return;

        const matchRgx = fileName.match(/\.(jpg|png|jpeg)/);
        if (matchRgx != null) {
            const imageUrl = URL.createObjectURL(e.target.files[0]);
            dispatch({
                type: "ImageUpload",
                file: e.target.files[0],
                url: imageUrl,
            });
        } else {
            dispatch({
                type: "ImageUpload",
                file: null,
                url: null,
            });
        }
    }

    function handleName(e) {
        e.preventDefault();
    }

    return (
        
            
                Name:
                 {
                        dispatch({
                            type: "setState",
                            field: e.target.name,
                            value: e.target.value,
                        });
                    }}
                />

                Image:
                
                

                Submit
            
        
    );
};

export default ReducerHook;

Explanation

当使用 useState Hook 时，你需要为每个想要管理的状态单独定义一个 setter 函数（例如 setContactName）。

使用 useReducer 时，所有状态更新共用同一个 dispatch 函数。dispatch 会向 reducer 函数发送一个 action，reducer 根据 action 的类型决定如何更新状态。

const [state, dispatch] = useReducer(reducer, initialState);

• state – 包含所有被跟踪值的对象。
• dispatch – 用于向 reducer 发送 action 的函数。
• reducer – 一个纯函数，接收当前状态和一个 action，返回新的状态。
• initialState – 状态对象的初始值。