Question

我有React Redux应用程序，它有两个独立的组件（Login＆amp; MessageBar），它们分别监听两个不同的状态（登录和消息）。

当登录失败时，将调度操作并显示错误消息，MessageBar组件将状态映射到props并触发显示消息的函数。这是通过componentWillReceiveProps完成的。

当再次调度相同的操作时，会发送相同的消息，但componentWillReceiveProps不再触发该函数。

我认为这是因为那段州没有改变。我喜欢调用动作来显示来自我的动作和组件的消息的想法。有关如何实现功能的任何想法触发相同的状态？或者有替代方式吗？

//** COMPONENTS **////
 class Login extends Component {
 /* ...calls action with username/password */
 }

 class MessageBar extends Component {
   componentWillReceiveProps(nextProps) {
    const { type, message } = nextProps;
    if (type && message) {
      this.dropdown.alertWithType(type, '', message);
    }
   }
   render() {
     <DropdownAlert
       ref={ref => this.dropdown = ref}
       errorColor={Colors.red}
       successColor={Colors.green}
       defaultContainer={{
        marginTop: Platform.OS === 'android' ? 24 : 0,
        padding: 8
       }}
      zIndex={100}
    />
  }
 }
 const mapStateToProps = ({ messages }) => ({ ..messages });
 export default connect(mapStateToProps)(MessageBar)

//** ACTION **/
export const LoginUser = ({ email, password}) => {
  if (!email || ! password ) {
    dispatch({ 
     type: 'global_message',
     payload: { 
       type: 'error',
       message: 'Invalid email/password'
     });
  } else {
    /** Some api call with dispatch... **/
  }
}


//** REDUCER **/
   export default (state = {}, { type, payload }) => {

    switch (type) {
        case 'global_message':
          return { ...payload }

        default:
          return state;
      }
    };

这是我工作的解决方案。 componentWillReceiveProps现在触发我的函数，并在数组的第一个键内的对象中返回状态。

/** REDUCER **/
export default (state = INITIAL_STATE, { type, payload }) => {
  switch (type) {
    case 'global_message':
      return [{
        ...payload, message: 'Incorrect email/password'
      }];
};

/** COMPONENT **/
class MessageBar extends Component {
   componentWillReceiveProps(nextProps) {
    const { type, message } = nextProps[0];
    if (type && message) {
      this.dropdown.alertWithType(type, '', message);
    }
   }
   render() {
     <DropdownAlert
       ref={ref => this.dropdown = ref}
       errorColor={Colors.red}
       successColor={Colors.green}
       defaultContainer={{
        marginTop: Platform.OS === 'android' ? 24 : 0,
        padding: 8
       }}
      zIndex={100}
    />
  }
 }
 const mapStateToProps = ({ messages }) => ({ ..messages });
 export default connect(mapStateToProps)(MessageBar)

componentWillReceiveProps不触发函数

0 个答案: