Question

目前，我正在开发一个使用模态的小应用程序。我不想使用像react-modal这样的'ready-to-use'软件包，而是决定自己尝试。

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

中的商店

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

export default createStore(reducer)

3）src/components/Modal.js中的模态组件。我希望这个组件可以重用，并包含我稍后会添加的输入表单。

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 按钮时，在我的模态中没有任何反应。这意味着我在派遣行动时做错了什么，但我不知道我错过了什么......

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

我的模态组件位于应用

中

Answer 1

您实际上正在调用 toggleModal()动作创建者。此外，您正在引用导入的函数，而不是您作为道具获得的函数：

onClick={ () => toggleModal }

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

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

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

onClick={this.props.toggleModal}

其次，您可以使用mapDispatch支持的“对象简写”语法替换connect函数：

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

const actions = {toggleModal};

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

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

为什么我的react \ redux应用程序中没有动作？

1 个答案: