バグを保存した後にリセット - 初期値を復元するために復元しない

Question

私は非常に奇妙なバグを抱えています。私はここで、最も簡単なテストケースのシナリオを再現しています：https://codesandbox.io/s/PNyPwyWP2

私も説明するスクリーンキャストをアップロードし、スクリーンキャストはここにユーチューブにある - https://youtu.be/iILiFieO-gk

私の目標は、ボタン、私は単一のフィールドを持つフォームを持っているということです「リセット」ボタンと「保存」ボタン。 [保存]をクリックすると、storeのsaveというフォームの値が減算器に保存されます。 [リセット]をクリックすると、フォームの値が最後の「初期」の値（initialValuesの値）にリセットされます。

しかし、私の問題は、フォームを保存した後、 "リセット"ボタンを "元の"値（新しく保存された値、initialValuesの値）にリセットする必要がありますが、 "元の元の値「

ここに私の完全なアプリのコードです：

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore, combineReducers } from 'redux' 
import { connect } from 'react-redux' 
import { Field, reduxForm, reducer as form } from 'redux-form' 

// ACTION & ACTION CREATOR 
const SAVE_FORM = 'SAVE_FORM'; 
function saveForm(values) { 
    return { 
    type: SAVE_FORM, 
    values 
    } 
} 
// REDUCER - save 
const INITIAL = { url:'hiiii' }; 
function save(state=INITIAL, action) { 
    switch(action.type) { 
    case SAVE_FORM: return action.values; 
    default: return state; 
    } 
} 


// STORE 
const reducers = combineReducers({ form, save }); 
const store = createStore(reducers); 

// MY FORM COMPONENT 
class MyFormDumb extends React.Component { 
    handleReset = e => { 
    e.preventDefault(); 
    this.props.reset(); 
    } 
    render() { 
    console.log('MyFormDumb :: pristine:', this.props.pristine, 'initialValues:', this.props.initialValues); 
    return (
     <form onSubmit={this.props.handleSubmit}> 
     <label htmlFor="url">URL</label> 
     <Field name="url" component="input" type="text" /> 
     <button onClick={this.handleReset}>Reset</button> 
     <button type="submit">Save</button> 
     </form> 
    ) 
    } 
} 

const MyFormControlled = reduxForm({ form:'my-form' }); 

const MyFormSmart = connect(
    function(state) { 
    return { 
     initialValues: state.save 
    } 
    } 
); 

const MyForm = MyFormSmart(MyFormControlled(MyFormDumb)); 

// MY APP COMPONENT 
class App extends React.PureComponent { 
    submitHandler = (values, dispatch, formProps) => { 
    dispatch(saveForm(values)); 
    } 
    render() { 
    return (
     <Provider store={store}> 
      <div className="app"> 
      <MyForm onSubmit={this.submitHandler} /> 
      </div> 
     </Provider> 
    ) 
    } 
} 

// RENDER 
ReactDOM.render(<App />, document.getElementById('app')) 

Answer 1

あなたreduxFormコンポーネント、as per the docsにenableReinitialize: trueフラグを使用してください。