Cập nhật trạng thái Redux không kích hoạt thành phầnWillReceiveProps

Question

Tôi đang cố xác thực thông tin đăng nhập. Sau khi đảm bảo đăng nhập hợp lệ, tôi muốn kích hoạt tuyến đường mới. Tôi chuyển state.loginReducer.login làm đạo cụ. Khi tôi xử lý sự kiện gửi, một hành động được gửi đi, thay đổi trạng thái đăng nhập toàn cục.

Không nên ComponentWillReceiveProps được kích hoạt trong trường hợp này? kể từ khi đạo cụ thay đổi ?. Có cách nào tốt hơn để triển khai chức năng này không?

handleSubmit (evt) { 
    const { 
     dispatch, 
     login 
    } = this.props; 

    dispatch(actions.doLogin(value.login)); 
} 

ComponentWillReceiveProps (nextprops) { 
    const { 
     login 
    } = this.nextProps; 

    if (login != null) { 
     history.pushState({}, '/account'); 
    } 
} 

function mapStateToProps (state) { 
    return { 
     login: state.loginReducer.login 
    } 
} 

export default connect(mapStateToProps)(Login); 

Answer 1

Nếu state.loginReducer.login thay đổi, sau đó componentWillReceiveProps sẽ được kích hoạt. Nếu bạn tin rằng trình giảm tốc của bạn đang trả lại trạng thái mới và componentWillReceiveProps không được kích hoạt, hãy đảm bảo rằng trạng thái mới là không thay đổi. Việc trả về cùng một tham chiếu trạng thái được truyền cho bộ giảm tốc sẽ không hoạt động.

Từ http://rackt.org/redux/docs/Troubleshooting.html:

này là sai:

function todos(state = [], action) { 
    switch (action.type) { 
    case 'ADD_TODO': 
    // Wrong! This mutates state 
    state.push({ 
     text: action.text, 
     completed: false 
    }); 
    case 'COMPLETE_TODO': 
    // Wrong! This mutates state[action.index]. 
    state[action.index].completed = true; 
    } 

    return state; 
} 

này là đúng:

function todos(state = [], action) { 
    switch (action.type) { 
    case 'ADD_TODO': 
    // Return a new array 
    return [...state, { 
     text: action.text, 
     completed: false 
    }]; 
    case 'COMPLETE_TODO': 
    // Return a new array 
    return [ 
     ...state.slice(0, action.index), 
     // Copy the object before mutating 
     Object.assign({}, state[action.index], { 
     completed: true 
     }), 
     ...state.slice(action.index + 1) 
    ]; 
    default: 
    return state; 
    } 
} 

Answer 2

ComponentWillReceiveProps (nextprops) nên componentWillReceiveProps (nextprops)

Chữ 'C' phải thấp hơn. Trên thực tế, mapStateToProps kích hoạt componentWillReceiveProps. Tôi chắc chắn về việc đó.