在AJAX調用之后更新Redux InitialValues

Question

我正在構建一個表單，在某些情況下，表單元素是通過AJAX調用注入的（例如，重復文本輸入）。

一切都很好，正在更新我的表單，但是我似乎無法在Redux存儲中將任何默認值恢復為初始表單狀態。 下面是我的自定義化簡器，它跟蹤表單元素。 我可以將新值再次推入初始狀態嗎？

//Schema Reducer
case "UPDATE_SCHEMA_FULFILLED":{

        let s = {...state.schema}
        for (let key in action.payload){
            if(s.hasOwnProperty(key)){
                if(key == 'values'){
                    s[key] = {...s[key], ...action.payload[key]}
                }else{
                    s[key] = [...s[key], ...action.payload[key]]
                }

            }
        }

        state = { ...state, 
            loaded: true,
            schema: {...s},
        }
        break;
    }

我的形式是按照文檔在首次加載時添加初始值：

CustomForm = connect(
  state => ({
initialValues: state.schema.schema.values
  }),
  dispatch => ({
    onSubmit: data => dispatch(saveForm(data))
  })
)(CustomForm)

這就是產生動作的原因：

import React from 'react'
import { addSchema } from '../actions/schemaActions'

export default class VirtualButton extends React.Component {
constructor(){
    super();
    this.generateNewLayout = this.generateNewLayout.bind(this)
}

generateNewLayout(e){
    e.preventDefault();
    this.props.dispatch(addSchema(this.props.owner));
}

render(){

    return <div className="cf__virtual-action"><a href="" onClick={this.generateNewLayout}>Create New</a></div>

}
}

Answer 1

這似乎在起作用，但是我不確定它是否表現出色？ 通過props將初始化值函數添加到動作中：

//My button that dispatches the initial call:
this.props.dispatch(addSchema(this.props.owner, this.props.initialize, this.props.initialValues));

export function addSchema($id, initialize, initial){
return function(dispatch) {
    axios.post(config.api+'forms/schema/virtual/'+$id)
    .then((response) => {
        dispatch({type: 'UPDATE_SCHEMA_FULFILLED', payload: response.data})
        initialize({...initial, ...response.data.values});
    })
    .catch((error) => {
        console.log(error);
    })
}
}