Redux组件未重新渲染

Question

需要一些关于React Redux的帮助，我无法弄清楚，我缺少了什么来使我的模态工作。你能帮我做这个吗？。我看到状态在改变，但组件没有渲染，模态也没有显示。

这是我的密码。你可以在这里找到回购

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';