How to send data to redux store from functional component?

Question

Here is my modal form component

    import { addItem } from "../actions/itemActions";


const Example = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="Create a new collection"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={() => {
        form
          .then(values => {
            form.resetFields();
            onCreate(values);
          })
          .catch(info => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="name"
          label="Item Name"
          rules={[
            {
              required: true,
              message: 'Please enter the name!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="count"
          label="Item count"
          rules={[
            {
              required: true,
              message: 'Please enter the number of items!',
            },
          ]}
        >
          <InputNumber style={{minWidth: '200px'}} />
        </Form.Item>
        <Form.Item
          name="initialValue"
          label="Item value"
          rules={[
            {
              required: true,
              message: 'Please enter the initialValue!',
            },
          ]}
        >
          <InputNumber style={{minWidth: '200px'}}  />
        </Form.Item>

      </Form>
    </Modal>
  );
};

Here is the collectionpage component Which will display the modal when the button is clicked

const CollectionsPage = () => {
  const [visible, setVisible] = useState(false);
  const [name, setName] = useState(null)
  const [count, setCount] = useState(null)
  const [initialValue, setInitialValue] = useState(null)

  const onCreate = values => {
    console.log(values)
  };


  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        New Collection
      </Button>
      <Example
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};



const mapStateToProps = (state) => ({
  item: state.item,
});

export default connect(mapStateToProps, { addItem })(CollectionsPage);

What I want to do is I want to set the stages of [name, count and initialValue] inside the onCreate function. I am new to function component so i don't know how to set multiple states at one time. I have tried many ways from google but i am always wrong.

After setting the state i want to create a newItem like this and export it to redux

() => {
        const newItem = {
          id: this.state.id,
          name: this.state.name,
          count: this.state.count,
          key: this.state.id,
          initialValue: this.state.initialValue,
        };
        this.props.addItem(newItem);
      }

Answer 1

Since states are related in your code, you can use useState hook to hold an object and call addItem from props to update redux state

const CollectionsPage = (props) => {
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState({})

  const onCreate = values => {
    console.log(values)
    const item = {
          id: values.id,
          name: values.name,
          count: values.count,
          key: values.id,
          initialValue: values.initialValue,
    };
    setItem(item);
    props.addItem(item);
  };
  ...

}