如何将Redux的Store与Actions关联到React组件并触发Actions？

Hey there! It sounds like you've got the core Redux pieces down—actions, constants, reducers, and store setup—great job so far! The missing link is connecting those pieces to your React components, specifically triggering actions to send form data to the store. Let's break this down step by step with practical examples.

1. First: Wrap Your App with the Redux Provider #

Before any component can interact with the Redux store, you need to make the store available to your entire React app. Use the Provider component from react-redux at your app's root:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store'; // Your pre-configured Redux store
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

This ensures every component in your tree can access the store when needed.

2. Two Common Ways to Trigger Actions #

Option 1: Use the useDispatch Hook (Recommended for Functional Components) #

Functional components are the modern standard in React, and useDispatch is the simplest way to get access to the Redux dispatch function.

First, let's assume you have an action creator for saving form data:

// src/actions/userActions.js
import { SAVE_USER_FORM_DATA } from '../constants'; // Your pre-defined constant

export const saveUserFormData = (formData) => ({
  type: SAVE_USER_FORM_DATA,
  payload: formData // The form data we'll send to the reducer
});

Now, in your form component:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { saveUserFormData } from './actions/userActions';

const UserForm = () => {
  // Local state to manage form input values
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: ''
  });
  // Get the dispatch function from Redux
  const dispatch = useDispatch();

  // Handle input changes to update local state
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

  // Handle form submission to trigger the action
  const handleSubmit = (e) => {
    e.preventDefault();
    // Dispatch the action with your form data
    dispatch(saveUserFormData(formData));
    // Optional: Reset the form after submission
    setFormData({ name: '', email: '', phone: '' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          required
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
        />
      </div>
      <div>
        <label>Phone:</label>
        <input
          type="tel"
          name="phone"
          value={formData.phone}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">Save Data</button>
    </form>
  );
};

export default UserForm;

Option 2: Use the connect Higher-Order Component (For Class Components or Legacy Code) #

If you're working with class components or maintaining an older codebase, the connect HOC is the traditional way to link React and Redux:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { saveUserFormData } from './actions/userActions';

class UserForm extends Component {
  state = {
    name: '',
    email: '',
    phone: ''
  };

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    // The action creator is mapped to props via connect
    this.props.saveUserFormData(this.state);
    this.setState({ name: '', email: '', phone: '' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Same form inputs as the functional component example */}
        <div>
          <label>Name:</label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleInputChange}
            required
          />
        </div>
        {/* Add other form fields here */}
        <button type="submit">Save Data</button>
      </form>
    );
  }
}

// Map action creators to component props
const mapDispatchToProps = {
  saveUserFormData
};

// Connect the component to Redux (null means we don't need to map state to props here)
export default connect(null, mapDispatchToProps)(UserForm);

3. Verify Your Data Made It to the Store #

To confirm your form data is being saved to the store, you can use the useSelector hook (for functional components) to fetch the state:

import { useSelector } from 'react-redux';

// Inside your component
const savedUserData = useSelector(state => state.user.formData); // Adjust based on your reducer structure
console.log('Saved User Data:', savedUserData);

For class components, use mapStateToProps with connect:

const mapStateToProps = (state) => ({
  savedUserData: state.user.formData
});

export default connect(mapStateToProps, mapDispatchToProps)(UserForm);

Then access the data via this.props.savedUserData in your class component.

Key Takeaways #

• Always wrap your app with Provider to make the Redux store accessible to all components.
• Triggering an action boils down to calling dispatch() with an action object (usually created by your action creator function).
• For modern functional components, stick with useDispatch and useSelector—they're simpler and more intuitive.
• Action creators just return action objects; the dispatch function is what actually sends that action to the reducer.

内容的提问来源于stack exchange，提问作者LiudasD