2017-07-26 85 views
0

我正在构建一个表单,其中某些情况下表单元素是从AJAX调用(例如重复文本输入)注入的。在AJAX调用后更新Redux InitialValues

一切都很好,并更新我的表单然而,我似乎无法得到任何默认值在我的REDEX存储返回到初始表单状态。下面是我的自定义减速器,用于跟踪表单元素。我可以将我的新值再次推入初始状态吗?

//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> 

} 
} 

回答

0

这似乎是工作,但我不确定它是否高性能?通过道具添加初始化值功能到动作:

//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); 
    }) 
} 
} 
相关问题