Question

在React-Redux上需要一些帮助，我无法弄清楚我要进行模态工作所缺少的东西。您能帮我吗？我看到状态正在改变，但组件未渲染，并且模态未显示。

这是我的代码。您可以找到仓库here

Entity

 export interface IModal {
        modalType: string;
        modalProps:IModalProps
    }

    export interface IModalProps {
        open:boolean;
    }

    export interface IModalManagerProps {
        currentModal?:IModal;
        closeModal?:()=>void;
    }

    export interface ILoginModalProps {
        closeModal:()=>void;
    }

    export interface IRegisterModalProps {
        closeModal:()=>void;
    }
   export interface IModalState {
     modal:IModal 
   }

Actions

import { ActionCreator } from 'redux';
import { IModalOpenAction, ModalActionTypes, IModalCloseAction } from './modalConstant';
import { IModal } from './Entity/modal';


export const openModalAction:ActionCreator<IModalOpenAction>=(modalpayload:IModal)=>{
    return {
         type:ModalActionTypes.MODAL_OPEN,
         payload:modalpayload 
    }
 }

 export const closeModalAction:ActionCreator<IModalCloseAction>=(modalpayload:IModal)=>{
     return {
         type:ModalActionTypes.MODAL_CLOSE,
         payload: modalpayload
     }
 }

Reducer

import { ModalAction, ModalActionTypes } from "./modalConstant";
import { IModalState } from "./Entity/IModalState";
import { IModal } from "./Entity/modal";
import { Reducer } from "redux";

const initialModal: IModal = {
  modalType: "",
  modalProps: {
    open: false
  }
};
const initialModalState: IModalState = {
  modal: initialModal
};

export const modalReducer: Reducer<IModalState, ModalAction> = (
  state = initialModalState,
  action: ModalAction
):IModalState => {
  switch (action.type) {
    case ModalActionTypes.MODAL_OPEN: {
      return {
        modal:{
          modalType: action.payload.modalType,
          modalProps: action.payload.modalProps
        }
      };
    }
    case ModalActionTypes.MODAL_CLOSE: {
      return initialModalState;
    }
    default:
      return state;
  }
};

export default modalReducer;

RootReducer

import { ModalAction, ModalActionTypes } from "./modalConstant";
import { IModalState } from "./Entity/IModalState";
import { IModal } from "./Entity/modal";
import { Reducer } from "redux";

const initialModal: IModal = {
  modalType: "",
  modalProps: {
    open: false
  }
};
const initialModalState: IModalState = {
  modal: initialModal
};

export const modalReducer: Reducer<IModalState, ModalAction> = (
  state = initialModalState,
  action: ModalAction
):IModalState => {
  switch (action.type) {
    case ModalActionTypes.MODAL_OPEN: {
      return {
        modal:{
          modalType: action.payload.modalType,
          modalProps: action.payload.modalProps
        }
      };
    }
    case ModalActionTypes.MODAL_CLOSE: {
      return initialModalState;
    }
    default:
      return state;
  }
};

export default modalReducer;

config store

import { IModalState } from './../../features/modals/Entity/IModalState';

import { createStore, Store  } from "redux"

import {composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from '../reducers/rootReducer';

export interface IApplicationState {

    form:any,
    modals:IModalState 

}
export  function configureStore(): Store<IApplicationState> {
    const store = createStore(rootReducer,composeWithDevTools());
    return store;
  }

App

import React, { FC } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'semantic-ui-react';
import {openModalAction } from './features/modals/modalActions'
import { connect } from 'react-redux';
import { IModal } from './features/modals/Entity/modal';
import { ModalManager } from './features/modals/modalManager';
export interface IAppProps {
  openModal:(modal:IModal)=>void,
}
const  App:FC<IAppProps>=(props)=> {
 const{openModal}=props;
  const handleOpenModal =()=>{
    openModal({
      modalType:'TestModal',
      modalProps:{
        open:true
      }
    })
  }
  return (
    <div className="App">
    <ModalManager></ModalManager>
    <Button onClick={handleOpenModal}>
    Open modal
  </Button>
    </div>
  );
}
const mapDispatchToProps = {

  openModal:openModalAction
};
export default connect(null, mapDispatchToProps)(App);

Modal Manager

import React, { FC } from "react";
import { connect } from "react-redux";
import { IModalManagerProps } from "./Entity/modal";
import { IApplicationState } from "../../app/store/configureStore";
import LoginModal from "./LoginModal";
import RegisterModal from "./RegisterModal";
import TestModal from "./TestModal";

const modalLookUp: any = {
  TestModal: TestModal,
  LoginModal: LoginModal,
  RegisterModal: RegisterModal
};
//export const ModalManager= (props:any) => {
export const ModalManager: FC<IModalManagerProps> = props => {
  const { currentModal } = props;

  console.log(currentModal);
  let renderedModal = null;
  if (currentModal) {
    const { modalProps } = currentModal;
    const ModalComponent = modalLookUp['TestModal'];
    renderedModal = <ModalComponent {...modalProps} />;
  }

  return <span>{renderedModal}</span>;
};

const mapStateToProps = (store: IApplicationState) => {
  return {
    currentModal: store.modals.modal
  };
};

export default connect(mapStateToProps)(ModalManager);

test modal

import React from "react";
import { Modal } from "semantic-ui-react";
import { closeModalAction } from "./modalActions";
import { connect } from "react-redux";


export const TestModal = () => {
  return (
    <div>
      <Modal closeIcon="close" open={true}>
        <Modal.Header>Test Modal</Modal.Header>
        <Modal.Content>
          <Modal.Description>
            <p>Test Modal... nothing to see here</p>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    </div>
  );
};
const mapDispatchToProps = {
  closeModal:closeModalAction
 };
export default connect(null, mapDispatchToProps)(TestModal);

Answer 1

我能够找到问题所在。

我正在像下面那样导入

import { ModalManager } from './features/modals/modalManager';

但应该是

import  ModalManager  from './features/modals/modalManager';

Redux组件未重新渲染

1 个答案: