リアクションUIが店舗変更後に更新されない

Question

私はReactとReduxに比較的新しく、学習用の簡単なajaxメールフォームを作成しました。私が抱えている問題は、フォームの提出後、すべてのフィールドをクリアするはずのInitialstateにストアステートを戻しますが、ストアステートは戻さないということです。私はredux loggerで店舗の変化を見ることができます。*写真が添付されていますが、これらの変更はUIに表示されません。私の店舗は状態に正しくマッピングされていませんか？あるいは、私はどこかで州に変異を起こしていますか？

export default function contactForm(state = initialState.formValues, action) { 
    switch (action.type) { 
    case types.FORM_RESET: 
     return initialState.formValues; 
    case types.FORM_SUBMIT_SUCCESS: 
     return Object.assign({}, action.message); 
    default: 
     return state; 
    } 
} 

コンバインリデューサー：

私の減速は、次のようになります

import { combineReducers } from 'redux'; 
import message from './formReducer'; 
import ajaxCallsInProgress from './ajaxStatusReducer'; 

const rootReducer = combineReducers({ 
    message, 
    ajaxCallsInProgress 
}); 

私の初期状態は以下のようになります。

export default { 
    formValues: { 
    name: '', email: '', message: '', 
    }, 
    ajaxCallsInProgress: 0, 
}; 

私の行動

は次のようになります。

経由して、私は小道具に状態をマッピングしていますビューで

：

constructor(props, context) { 
    super(props, context); 
    this.state = { 
    message: Object.assign({}, this.props.message), 
    } 
} 

render() { 
    return (
    <ContactForm 
     onChange={this.updateMessageState} 
     onSubmit={this.submitForm} 
     message={this.state.message} 
    /> 
); 
} 

function mapStateToProps(state) { 
    return { 
    message: state.message, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(formActions, dispatch) 
    }; 
} 

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

ストアを示すログは、私はどんなアドバイスに非常に感謝される

を変更します。

Answer 1

次のように状態を更新しました。私はこれがReduxのベストプラクティスであるかどうかは分かりませんが、それはうまくいったのですか？

componentWillReceiveProps(nextProps) { 
    this.setState({ message: nextProps.mail }); 
    } 

Answer 2

あなたの例ではうまくいくと思うコードで私の答えを更新しました。あなたはかなり近かったですが、2つの減速機を組み合わせようというあなたのコメントに基づいて、私は2つの減速機を作りました。

/* constants.js */ 
export default { 
    FORM_RESET: 'FORM_RESET', 
    FORM_SUBMIT: 'FORM_SUBMIT', 
    AJAX_REQUEST: 'AJAX_REQUEST' 
}; 


/* form-values-reducer.js */ 
const initialState = { 
    name: '', 
    email: '', 
    message: '' 
}; 

export default const formValuesReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case Constants.FORM_SUBMIT: 
     return { 
     ...state, 
     message: action.message 
     }; 

    case Constants.FORM_RESET: 
     return { 
     ..state, 
     name: '', 
     email: '', 
     message: '' 
     }; 

    default: 
     return state; 
    } 
}; 

/* ajax-request-reducer.js */ 
const initialState = { 
    ajaxRequestCount: 0 
}; 

export default const ajaxRequestReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case Constants.AJAX_REQUEST: 
     return { 
     ...state, 
     ajaxRequestCount: state.ajaxRequestCount + 1 
     }; 
    default: 
     return state; 
    } 
}; 

/* action-creators.js */ 
export const resettedForm =() => { 
    return { 
    type: Constants.FORM_RESET 
    } 
}; 

export const submittedForm = (message) => { 
    return { 
    type: Constants.FORM_SUBMIT, 
    message 
    } 
}; 

export const ajaxRequested =() => { 
    return { 
    type: Constants.AJAX_REQUEST 
    } 
}; 

/* actions */ 
export const resetForm = (dispatch) => { 
    return() => { 
    dispatch(resettedForm()); 
    } 
}; 

export const submitForm = (dispatch) => { 
    return (message) => { 
    dispatch(ajaxRequested()); 
    dispatch(submittedForm(message)); 
    } 
}; 

/* reducers.js */ 
import { combineReducers } from 'redux'; 
import ajaxRequest from './ajax-request-reducer'; 
import formValues from './form-values-reducer'; 

export default combineReducers({ 
    ajaxRequest, 
    formValues 
}); 

/* Component */ 
import React from 'react'; 
import { connect } from 'react-redux'; 
import { resetForm, submitForm } from './actions'; 

const App = (props) => (
    <div>Your app UI stuff goes here</div> 
); 

const mapStateToProps = (state) => { 
    return { 
    name: state.formValues.name, 
    email: state.formValues.email, 
    message: state.formValues.message, 
    ajaxRequestCount: state.ajaxRequest.ajaxRequestCount 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    resetForm: resetForm(dispatch), 
    submitForm: submitForm(dispatch) 
    } 
}; 

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

私は何を介してこれを実行していませんでしたので、あちこちのコードでいくつかのミスがあるかもしれません。