Javascript 商店更改后，react redux UI未更新

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

我的行动是这样的：

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

构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
消息：Object.assign（{}，this.props.message），
}
}
render（）{
返回(
);
}
函数MapStateTops（状态）{
返回{
message:state.message，
};
}
功能图DispatchToprops（调度）{
返回{
动作：bindActionCreators（动作、调度）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ContactSection）；

显示存储更改的日志

---

如果有任何建议，我将不胜感激。

我已经用我认为适用于您的示例的代码更新了我的答案。你们非常接近，但是根据你们关于尝试合并两个减速机的评论，我已经创建了两个减速机，这样你们可以看到它是如何工作的

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

/*constants.js*/
导出默认值{
表单重置：“表单重置”，
表格提交：“表格提交”，
AJAX\u请求：“AJAX\u请求”
};
/*form-values-reducer.js*/
常量初始状态={
名称：“”，
电子邮件：“”，
消息：“”
};
导出默认常量formValuesReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
case Constants.FORM_提交：
返回{
……国家，
消息：action.message
};
case Constants.FORM_重置：
返回{
…声明，
名称：“”，
电子邮件：“”，
消息：“”
};
违约：
返回状态；
}
};
/*ajax-request-reducer.js*/
常量初始状态={
ajaxRequestCount:0
};
导出默认常量ajaxRequestReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
case Constants.AJAX\u请求：
返回{
……国家，
ajaxRequestCount:state.ajaxRequestCount+1
};
违约：
返回状态；
}
};
/*action-creators.js*/
export const resettedForm=（）=>{
返回{
类型：Constants.FORM\u RESET
}
};
导出常量submittedForm=（消息）=>{
返回{
类型：Constants.FORM_SUBMIT，
消息
}
};
导出常量ajaxRequested=（）=>{
返回{
类型：Constants.AJAX\u请求
}
};
/*行动*/
export const resetForm=（分派）=>{
return（）=>{
调度（resetedForm（））；
}
};
导出const submitForm=（分派）=>{
返回（消息）=>{
分派（ajaxRequested（））；
发送（提交表格（信息））；
}
};
/*reducers.js*/
从'redux'导入{combinereducer}；
从“/ajax请求缩减器”导入ajaxRequest；
从“/form values reducer”导入formValues；
导出默认合并器({
阿贾克斯请求，
FormValue
});
/*组成部分*/
从“React”导入React；
从'react redux'导入{connect}；
从“/actions”导入{resetForm，submitForm}；
常量应用=（道具）=>(
你的应用程序界面在这里
);
常量mapStateToProps=（状态）=>{
返回{
名称：state.formValues.name，
电子邮件：state.formValues.email，
消息：state.formValues.message，
ajaxRequestCount:state.ajaxRequest.ajaxRequestCount
};
};
const mapDispatchToProps=（调度）=>{
返回{
重置表单：重置表单（调度），
提交表单：提交表单（调度）
}
};
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

---

我没有运行过任何程序，因此代码中可能有一些错误。

我添加了以下更新状态的程序。我不确定这是否是Redux的最佳实践，但它奏效了

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

---

你能提供你的初始状态吗？我认为问题的根源在于你在你的减速机中改变了状态。汤姆，我刚刚添加了initialstate我仍然无法解决这个问题，还有其他人遇到过这个问题吗？只是再次快速查看一下你的代码，在你的

mapstatetrops

方法上，你正在设置

state.message

，但是它不应该是state.formValues.message吗？？谢谢Tom，我使用initialstate.formValues，它返回message对象。由于联合收割机减速器的原因，它应该是state.message。我刚刚添加了我的组合减缩器。@graemepul我已经用代码更新了我的答案，我认为这些代码应该可以使您的示例正常工作。UI组件逻辑不存在，但redux逻辑应该可以。再次感谢@Tom，我更改了我的reducer，但是当我将消息对象传递给conform组件时，我必须将其拆分。我刚刚创建了一个回购协议，因为它可能更容易看到。