تابع connect الخاص بـredux لا يعمل على تغليف خطاف بل على تغليف component مثال:
import { connect } from 'react-redux';
function Component(props) {
const {postForm} = props;
// use postForm in some way
return (<div>{state}</div>);
}
const mapDispatchToProps = (dispatch) => {
return { postForm: (state) => dispatch(formForm(state)) };
};
export default connect(null, mapDispatchToProps)(Component);
ذلك بأن تابع connect يمرر props إلى Component من redux ولا يمررها إلى خطاف.
إن كنت قد أردت استعمال إحدى props داخل خطاف يمكنك فعل اﻵتي:
import { useState } from 'react';
import { connect } from 'react-redux';
function useForm() {
const [state, setState] = useState(initialState);
return [state, setState];
}
function Component(props){
const [form,setForm] = useForm();
const {postForm} = props;
const submitHandler = () => postForm(form);
return (<button onClick={submitHandler}></button>)
}
const mapDispatchToProps = (dispatch) => {
return { postForm: (state) => dispatch(formForm(state)) };
};
export default connect(null, mapDispatchToProps)(Component);
أخيراً لدى react-redux الخطافين useSelector وuseDispatch واللذين يغنيانك عن connect هكذا:
import { useState } from 'react';
import { useDispatch } from 'react-redux';
function useForm() {
const [state, setState] = useState(initialState);
return [state, setState];
}
function Component(){
const [form,setForm] = useForm();
const dispatch = useDispatch();
const submitHandler = () => dispatch(formForm(state));
return (<button onClick={submitHandler}></button>)
}
export default Component;