javascript - 连接的属性仅更新一次，不会更新第二次

Question

我正在使用 redux-forms 来处理所有与表单相关的事情。但是 redux-form 和 connect 装饰器都不能很好地协同工作。当提交表单更改我的 redux 存储时，Connect 正在更新我的 showSpinner 属性。但是下次当 redux 存储发生变化时，我的连接属性不会更新。

代码如下:

组件.js

const formSubmit = (values, dispatch) => {
    dispatch(submitLogin(values));
}

const mapStateToProps = (state, ownProps) => {
  return {
    app: state.app,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
        mockSubmit: values => {
            dispatch(submitLogin(values));
        }
  }
}

@connect(mapStateToProps, mapDispatchToProps)
@reduxForm({form: 'loginForm', validate, onSubmit: formSubmit})
class Login extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const fullWidth = true;
        const self = this;
    return (
      <div>
                <p>{self.props.app.showSpinner.toString()}</p>
                <CircularProgress size={80} thickness={5} style={{display: self.props.app.showSpinner ? "block" : "none"}} />
        <form onSubmit={this.props.handleSubmit}>
          <div className="card-box">
            <div className="head">
              <p>Login</p>
            </div>
            <div className="body">
              <Field name="phone" type="text" component="input" label="Mobile Number"/>
            </div>
          </div>
        </form>
        <Terms/>
      </div>
    )
  }

}
export default Login;

action.js

export function submitLogin(data){
  return dispatch => {
    dispatch(fetchLoginApi(data));
    fetchLogin(data) //a helper method to hit login api
      .then(res => {
        dispatch(verifiedUser(res));
      })
      .catch(err => console.log(err))
  }
}

function fetchLoginApi(data) {
  return{
    type: SUBMIT_LOGIN,
    data
  }
}

function verifiedUser(data) {
  return {
    type: VERIFIED_USER,
    data
  }
}

app.js//在组合 reducer 中，我将此 reducer 添加为应用程序

const initialState = {
  showSpinner: false,
  showAlert: false,
  showConfirm: false,
}

export function app(state = initialState, action) {
  switch(action.type) {

     case SUBMIT_LOGIN:
     return Object.assign(state, {
       showSpinner: true
     });
      break;

    case VERIFIED_USER:
      return Object.assign(state, {
        showSpinner: false
      });
      break;

    default:
      return state;
  }
}

我正在使用 thunk 中间件。所有导入都以正确的方式完成，没有语法错误，并且我使用注释来使用 connect 和 reduxForm 等 HOC 来装饰类。

Answer 1

您错误地实现了app reducer 。它会改变 state 对象，而不是创建一个新对象。

应该是

export function app(state = initialState, action) {
  switch(action.type) {

     case SUBMIT_LOGIN:
     return Object.assign({}, state, { // notice new object as the first arg
       showSpinner: true
     });

    case VERIFIED_USER:
      return Object.assign({}, state, {
        showSpinner: false
      });

    default:
      return state;
  }
}