Connected 属性只更新一次，不会更新第二次

Question

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

代码如下：

component.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 //在组合减速器中，我将这个减速器添加为应用程序

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 中间件。所有导入都以正确的方式完成，没有语法错误，我正在使用注释来装饰 class 和 HOC，如 connect 和 reduxForm。

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

Connected 属性只更新一次，不会更新第二次

Connected property is updated only once, its not updating for second time

javascript

reactjs

redux

redux-form

react-redux

Connected 属性 只更新一次，不会更新第二次

Connected property is updated only once, its not updating for second time

javascript

reactjs

redux

redux-form

react-redux

Connected 属性只更新一次，不会更新第二次