如何监听mapState中Redux-Saga返回值变化并同步至Redux-form Field？

Hey, I’ve run into exactly this scenario before—here are a couple of solid solutions that should solve your problems:

方案1：监听Props变化，触发Redux-Form的change Action #

Since you already have the target value in your component via mapStateToProps, the simplest approach is to watch for changes to that prop and dispatch the change action when it updates. This avoids race conditions because the prop only updates after your Redux-Saga has finished updating the state—so you’re guaranteed to have the latest value when you sync it to the form.

类组件示例（使用componentDidUpdate）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { change, Field, reduxForm } from 'redux-form';

class YourForm extends Component {
  componentDidUpdate(prevProps) {
    // Check if the value from your saga has changed
    if (prevProps.sagaDerivedValue !== this.props.sagaDerivedValue) {
      // Sync the new value to your Redux-Form field
      this.props.dispatch(
        change('yourFormName', 'targetFieldName', this.props.sagaDerivedValue)
      );
    }
  }

  render() {
    return (
      <form>
        <Field
          name="targetFieldName"
          component="input"
          type="text"
          placeholder="Value from Saga"
        />
      </form>
    );
  }
}

// Map the saga-updated state to props
const mapStateToProps = state => ({
  sagaDerivedValue: state.yourReducer.sagaReturnedValue,
});

// Wrap with reduxForm and connect
export default reduxForm({ form: 'yourFormName' })(
  connect(mapStateToProps)(YourForm)
);

函数组件示例（使用useEffect）

If you’re using functional components, useEffect is the way to go—just add your saga-derived prop to the dependency array so the effect runs whenever it changes:

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { change, Field, reduxForm } from 'redux-form';

const YourForm = ({ sagaDerivedValue, dispatch }) => {
  useEffect(() => {
    // Sync the value to the form field whenever it updates
    dispatch(
      change('yourFormName', 'targetFieldName', sagaDerivedValue)
    );
  }, [sagaDerivedValue, dispatch]); // Only run when these values change

  return (
    <form>
      <Field
        name="targetFieldName"
        component="input"
        type="text"
        placeholder="Value from Saga"
      />
    </form>
  );
};

const mapStateToProps = state => ({
  sagaDerivedValue: state.yourReducer.sagaReturnedValue,
});

export default reduxForm({ form: 'yourFormName' })(
  connect(mapStateToProps)(YourForm)
);

方案2：动态更新Redux-Form的initialValues（可选） #

If you prefer to set the value as part of the form’s initial state (rather than updating an existing field), you can dynamically pass initialValues to the reduxForm HOC. You’d still rely on mapStateToProps to get the saga-derived value, and Redux-Form will update the initial values whenever the prop changes:

const mapStateToProps = state => ({
  initialValues: {
    targetFieldName: state.yourReducer.sagaReturnedValue,
  },
});

export default reduxForm({
  form: 'yourFormName',
  enableReinitialize: true, // Critical: allows initialValues to update after mount
})(connect(mapStateToProps)(YourForm));

Just make sure to set enableReinitialize: true—this tells Redux-Form to reinitialize the form when initialValues changes, which is exactly what you need after your Saga finishes fetching data.

Key Notes to Avoid Issues #

• Form/Field Names: Double-check that your form name and field name match exactly what you’ve defined in Redux-Form.
• Undefined Values: If your saga might return undefined initially, add a check in the effect/lifecycle method to avoid dispatching unnecessary change actions.
• Race Conditions: Since both solutions rely on the prop updating after the Saga completes, you don’t have to worry about race conditions—you’re only syncing the value once it’s safely in the Redux store.

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