在商店更改後，redux UI不會更新

Question

對於React和Redux，我相對較新，並且我創建了一個簡單的ajax電子郵件表單來進行學習。我遇到的問題是，在表單提交後，我將商店狀態設置回初始狀態，它應清除所有字段，但不會。我可以看到商店在Redux記錄器中的更改，*請參閱附加的圖像，但這些更改未顯示在用戶界面上。我的商店沒有正確映射到狀態？或者我在某處變異狀態？

我減速如下所示：

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, 
}; 

我的操作是這樣的：

export function messageSuccess(message) { 
    return { type: types.FORM_SUBMIT_SUCCESS, message }; 
} 

export function resetForm() { 
    return { type: types.FORM_RESET }; 
} 

export function saveMessage(message) { 
    return function (dispatch) { 
    dispatch(beginAjaxCall()); 
    return messageApi.saveMessage(message) 
    .then(() => { 
     dispatch(messageSuccess(message)); 
     dispatch(resetForm()); 
    }).catch((error) => { 
     dispatch(ajaxCallError(error)); 
     throw (error); 
    }); 
    } 
} 

在我通過映射狀態道具的觀點：

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

我已將我的答案更新爲我認爲應該適用於您的示例的代碼。你非常接近，但是根據你的意見，試圖結合兩個減速器，我已經創建了兩個減速器，所以你可以看到它是如何工作的。

/* 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); 

我沒有運行這個任何東西，所以這裏和那裏的代碼可能會有一些錯誤。