在商店更改后，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); 

我没有运行这个任何东西，所以这里和那里的代码可能会有一些错误。