Javascript 为什么'；我的react\redux应用程序中的t action fire？

目前，我正在开发一个利用modals的小应用程序。我不想使用像react modal这样的“即用”软件包，而是决定自己尝试

1）

src/reducers/modalReducer.js

const modalReducer = (state = {
  show: true,
}, action) => {
  switch (action.type) {
    case 'TOGGLE_MODAL':
      console.log('reducer worked out')
      state = {...state, show: !state.show }
      break
    default:
        return state
  }
}

export default modalReducer

import { combineReducers } from 'redux'
import modalReducer from './modalReducer'

const reducers = combineReducers({
  modal: modalReducer
})

export default reducers

import { createStore } from 'redux'
import reducer from './reducers/index'

export default createStore(reducer)

My

reducers/index.js

const modalReducer = (state = {
  show: true,
}, action) => {
  switch (action.type) {
    case 'TOGGLE_MODAL':
      console.log('reducer worked out')
      state = {...state, show: !state.show }
      break
    default:
        return state
  }
}

export default modalReducer

import { combineReducers } from 'redux'
import modalReducer from './modalReducer'

const reducers = combineReducers({
  modal: modalReducer
})

export default reducers

import { createStore } from 'redux'
import reducer from './reducers/index'

export default createStore(reducer)

2）

src/store.js

const modalReducer = (state = {
  show: true,
}, action) => {
  switch (action.type) {
    case 'TOGGLE_MODAL':
      console.log('reducer worked out')
      state = {...state, show: !state.show }
      break
    default:
        return state
  }
}

export default modalReducer

import { combineReducers } from 'redux'
import modalReducer from './modalReducer'

const reducers = combineReducers({
  modal: modalReducer
})

export default reducers

import { createStore } from 'redux'
import reducer from './reducers/index'

export default createStore(reducer)

3）

src/components/Modal.js

中的Modal组件。我希望这个组件是可重用的，并且包含我将在后面添加的输入表单

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { toggleModal } from '../actions/index'
import { bindActionCreators } from 'redux'

import '../css/Modal.css'

class Modal extends Component {

  render () {
    if(!this.props.show) {
      return (<h1>FUC YOU</h1>)
    }
    console.log('HELLLO' + this.props.show)

    return (
      <div className='backdrop'>
        <div className='my-modal'>
          <div className='footer'>
            <button className='close-btn' onClick={ () => toggleModal }>
              X
            </button>
          </div>
          <h1>{ this.props.title }</h1>
          <hr/>
          <div>
            { this.props.contents }
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { show: state.modal.show }
}

const mapDispatchToProps = (dispatch) => {
  return {
    toggleModal: () => dispatch(toggleModal())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Modal)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../actions/index”导入{toggleModal}
从“redux”导入{bindActionCreators}
导入“../css/Modal.css”
类模态扩展组件{
渲染（）{
如果（！this.props.show）{
回来（操你）
}
console.log（'HELLLO'+this.props.show）
返回(
切换模式}>
X
{this.props.title}

{this.props.contents}
)
}
}
常量mapStateToProps=（状态）=>{
返回{show:state.modal.show}
}
const mapDispatchToProps=（调度）=>{
返回{
toggleModal:（）=>调度（toggleModal（））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（模式）

我的问题是，当我按下按钮x时，在我的模式中什么都没有发生。这意味着我在调度行动时做了错事，但我不知道我错过了什么

此时，我只想在按下x按钮时关闭空模式

在我的index.js中，我有以下结构：

import React from 'react'
import ReactDOM from 'react-dom'
import registerServiceWorker from './registerServiceWorker'

import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store.js'

import App from './components/App'
ReactDOM.render(
  <Provider store = {store} >
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'))
registerServiceWorker()

从“React”导入React
从“react dom”导入react dom
从“./registerServiceWorker”导入registerServiceWorker
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“./store.js”导入存储
从“./components/App”导入应用程序
ReactDOM.render(
，document.getElementById（'root'））
registerServiceWorker（）

我的模态组件位于应用程序中

您实际上没有调用

切换模态（）

动作创建者。此外，您引用的是导入的函数，而不是作为道具获得的函数：

onClick={ () => toggleModal }

立即的修复方法是：

onClick={（）=>this.props.toggleModal（）}

话虽如此，还有两种方法可以改进此代码

首先，您可以直接将

toggleModal

作为

onClick

的处理程序传递，如下所示：

onClick={this.props.toggleModal}

其次，您可以使用

connect

支持的“对象速记”语法替换

mapspatch

函数：

import {toggleModal} from "../actions";

const actions = {toggleModal};

export default connect(mapState, actions)(Modal);

除此之外，我鼓励您阅读我的文章，其中专门介绍了如何使用React和Redux实现模态对话框，并指出了有关该主题的其他资源