Question

我有一个用于登录申请的减速机当出现问题时我想显示Alert 发送显示模式操作的登录操作：

export function loginUser(username, password) { ...
   dispatch({type: 'SHOW_MODAL', modalType: 'SUCESSFULL_LOGIN'})

模态减速器：

export default function reducer(state={}, action) {
  switch (action.type) {
    case 'SHOW_MODAL':
      return {
        modalType: action.modalType
      }
  }
  return state
}

但现在我不知道接下来要去哪里现在在哪里阅读state并显示Alert视图。

Answer 1

您需要将组件连接到redux并从州获取所需的属性。例如：

const stateMap = (state, props, ownProps) => {
    return(
       /* Here all your state */
       /* name_property: state.name_action_import.name_property_on_state*/
       modalType: state.login.modalType
    )
}

function mapDispatchToProps(dispatch) {
    return {
        // This you put action on this component if you need
   };
};

在此处将组件连接到redux

export default connect(stateMap, mapDispatchToProps)(Alers);

这个变量在组件中你可以从道具中得到： this.props.modalType

您的组件警报将如下所示：

import React from "react";
import { connect } from 'react-redux';
import login from './../../../actions'; /* Here your inport to action */

class Alers extends Component {
    render() {
        return (
            <div >
                {this.props.modalType /*here you property from state */}
            </div>
        );
    }
}


const stateMap = (state, props, ownProps) => {
    return {
        modalType: state.login.modalType
    };
};

function mapDispatchToProps(dispatch) {
    return {
    };
};

export default connect(stateMap, mapDispatchToProps)(Alers);

无法在本机redux应用程序中完成显示警报

1 个答案: