Question

我对React和Redux相对较新，我创建了一个简单的ajax电子邮件表单供学习。我遇到的问题是，在表单提交后我将存储状态设置回Initialstate，它应该清除所有字段，但它不会。我可以看到存储在redux记录器中的变化，*见附图，但这些变化没有在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);

显示商店更改的日志

我会非常感谢任何建议。

Answer 1

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

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

我没有通过任何方式执行此操作，因此代码中可能存在一些错误。

Answer 2

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

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

更改存储后，redux UI不会更新

2 个答案: