連接的屬性只更新一次，它不是第二次更新

Question

我正在使用redux-forms來處理所有與窗體有關的事情。但是redux-form和連接裝飾器都不能很好地協同工作。 Connect會更新我的showSpinner屬性，因爲提交表單會更改我的redux商店。但下一次當redux商店更改時，我的連接屬性不會更新。

下面的代碼：

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中間件。所有的導入都以正確的方式完成，沒有語法錯誤，我使用註釋來裝飾HOC，例如connect和reduxForm。

Answer 1

您錯誤地實施了app減速機。它變異了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; 
    } 
}