ايصال خطاف مصطنع ب redux

تابع 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;