如何将从数据库获取的值存入react-redux的state状态中

1. 定义表单预填充相关Action #

先声明action类型，再编写对应的action创建函数：

// actionTypes.js
export const SET_FORM_PREFILL_DATA = 'SET_FORM_PREFILL_DATA';

// actionCreators.js
import { SET_FORM_PREFILL_DATA } from './actionTypes';

export const setFormPrefillData = (data) => ({
  type: SET_FORM_PREFILL_DATA,
  payload: data
});

如果使用redux-thunk处理异步逻辑，还可以直接把接口请求封装为异步action，简化组件代码：

// 新增异步action（可选）
import { getPrefillDataApi } from '../api'; // 替换为你自己的接口请求方法
export const fetchPrefillData = () => {
  return (dispatch) => {
    getPrefillDataApi().then(res => {
      dispatch(setFormPrefillData(res.data));
    }).catch(err => console.error('预填数据获取失败', err))
  }
}

2. 编写Reducer处理逻辑 #

在表单对应的reducer中监听目标action，把返回数据存入store：

// reducers/formReducer.js
import { SET_FORM_PREFILL_DATA } from '../actionTypes';

const initialState = {
  prefillData: {},
  // 其他表单相关状态
};

export default function formReducer(state = initialState, action) {
  switch(action.type) {
    case SET_FORM_PREFILL_DATA:
      return {
        ...state,
        prefillData: action.payload
      };
    default:
      return state;
  }
}

完成后记得将该reducer注册到项目根reducer中。

3. 组件中触发Action #

通过connect高阶组件把需要的state和action注入组件props，在componentDidMount的接口回调中触发action即可：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setFormPrefillData, fetchPrefillData } from '../store/actionCreators';
import { getPrefillDataApi } from '../api';

class FormPage extends Component {
  componentDidMount() {
    // 方式1：组件内调用接口，成功后dispatch同步action
    getPrefillDataApi().then(res => {
      this.props.setFormPrefillData(res.data);
    })

    // 方式2：如果封装了异步thunk action，直接调用即可（二选一）
    // this.props.fetchPrefillData();
  }

  render() {
    // 从props拿到store里的预填数据，直接回填到对应表单项
    const { prefillData } = this.props;
    return (
      <form>
        <input name="username" defaultValue={prefillData.username || ''} />
        <input name="phone" defaultValue={prefillData.phone || ''} />
        {/* 其余表单项按相同规则回填 */}
      </form>
    )
  }
}

const mapStateToProps = (state) => ({
  prefillData: state.form.prefillData // 按你实际的store层级调整取值路径
});

const mapDispatchToProps = {
  setFormPrefillData,
  fetchPrefillData
}

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

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