javascript - 为什么我的 react\redux 应用程序没有触发 Action ？

Question

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

1) src/reducers/modalReducer.js

中的 reducer

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

我的 reducers/index.js

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

const reducers = combineReducers({
  modal: modalReducer
})

export default reducers

2) src/store.js

中的 store

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)

我的问题是，当我按下按钮 x 时，在我的模式中没有任何反应。这意味着我在调度 Action 时做错了什么，但我不知道我错过了什么......

此时我只想在按下 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()

我的 Modal 组件在 App

Answer 1

您实际上并没有调用 toggleModal() Action 创建器。此外，您引用的是导入的函数，而不是您作为 Prop 获得的函数:

onClick={ () => toggleModal }

立即修复是:onClick={ () => this.props.toggleModal() }。

话虽如此，您还可以通过其他两种方式改进此代码。

首先，您可以将 toggleModal 作为 onClick 的处理程序直接传递，例如:

onClick={this.props.toggleModal}

其次，您可以使用 connect 支持的“object shorthand”语法替换 mapDispatch 函数:

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

const actions = {toggleModal};

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

除此之外，我鼓励您阅读我的帖子 Practical Redux, Part 10: Managing Modals and Context Menus ，具体展示了如何使用 React 和 Redux 实现模态对话框，并指向有关该主题的其他资源。