Javascript 动作不会触发React+；重演

我正在开发一个react redux应用程序，由于某些原因，我调用的操作没有到达reducer（在reducer中，我目前只有一个log语句）。我已附上代码，我觉得是相关的，任何贡献将不胜感激

在组件中的函数内调用的操作：

onSearchPressed() {
    console.log('search pressed');
    this.props.addToSaved();
}

actions/index.js：

var actions = exports = module.exports

exports.ADD_SAVED = "ADD_SAVED";

exports.addToSaved = function addToSaved() {
  console.log('got to ADD_SAVED step 2');
  return {
    type: actions.ADD_SAVED
  }
}

const { combineReducers } = require('redux')
const items = require('./items')

const rootReducer = combineReducers({
  items: items
})

module.exports = rootReducer

reducers/items.js：

const {
  ADD_SAVED
} = require('../actions/index')

const initialState = {
    savedList: []
}

module.exports = function items(state = initialState, action) {
    let list

    switch (action.type) {
        case ADD_SAVED:
            console.log('GOT to Step 3');
            return state;
        default:
            console.log('got to default');
            return state;
    }
}

reducers/index.js：

var actions = exports = module.exports

exports.ADD_SAVED = "ADD_SAVED";

exports.addToSaved = function addToSaved() {
  console.log('got to ADD_SAVED step 2');
  return {
    type: actions.ADD_SAVED
  }
}

const { combineReducers } = require('redux')
const items = require('./items')

const rootReducer = combineReducers({
  items: items
})

module.exports = rootReducer

store/configure-store.js：

import { createStore } from 'redux'
import rootReducer from '../reducers'

let store = createStore(rootReducer)

编辑：onSearchPressed的整个组件：

class MainView extends Component {
    onSearchPressed() {
        this.props.addToSaved();
    }
    render() {
        console.log('MainView clicked');
        var property = this.props.property;

        return (
            <View style={styles.container}>
                <Image style={styles.image}
                    source={{uri: property.img_url}} />
                <Text style={styles.description}>{property.summary}</Text>
                <TouchableHighlight style = {styles.button}
                        onPress={this.onSearchPressed.bind(this)}
                        underlayColor='#99d9f4'>
                        <Text style = {styles.buttonText}>Save</Text>
                    </TouchableHighlight>
            </View>
        );
    }
}

module.exports = MainView;

class MainView扩展组件{
onSearchPressed（）{
this.props.addToSaved（）；
}
render（）{
log（'MainView clicked'）；
var属性=this.props.property；
返回(
{property.summary}
拯救
);
}
}
module.exports=MainView；

正如Rick Jolly在对您的问题的评论中提到的，您的

onSearchPressed（）

函数实际上并没有分派该操作，因为

addToSaved（）

只是返回一个操作对象，它不分派任何内容

如果要从组件分派操作，应使用将组件连接到redux。例如：

const { connect } = require('react-redux')

class MainView extends Component {
  onSearchPressed() {
    this.props.dispatchAddToSaved();
  }
  render() {...}
}

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchAddToSaved: () => dispatch(addToSaved())
  }
}

module.exports = connect(null, mapDispatchToProps)(MainView)

---

有关更多信息，请参阅。

最近我遇到了这样的问题，发现我使用了动作导入，但它必须来自道具。查看toggleAddContactModal的所有用法。在我的例子中，我没有从导致此问题的destructuring语句中获取TogleAddContactModal

import React from 'react'
import ReactDOM from 'react-dom'
import Modal from 'react-modal'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import {
  fetchContacts,
  addContact,
  toggleAddContactModal
} from '../../modules/contacts'
import ContactList from "../../components/contactList";

Modal.setAppElement('#root')

class Contacts extends React.Component {
  componentDidMount(){
    this.props.fetchContacts();
  }
  render(){
    const {fetchContacts, isFetching, contacts, 
      error, isAdding, addContact, isRegisterModalOpen,
      toggleAddContactModal} = this.props;
    let firstName;
    let lastName;
    const handleAddContact = (e) => {
      e.preventDefault();
      if (!firstName.value.trim() || !lastName.value.trim()) {
        return
      }
      addContact({ firstName : firstName.value, lastName: lastName.value});
    };

    return (
      <div>
        <h1>Contacts</h1>
        <div>
          <button onClick={fetchContacts} disabled={isFetching}>
            Get contacts
          </button>
          <button onClick={toggleAddContactModal}>
            Add contact
          </button>
        </div>
        <Modal isOpen={isRegisterModalOpen} onRequestClose={toggleAddContactModal}>
          <input type="text" name="firstName" placeholder="First name" ref={node =>         
 (firstName = node)} ></input>
      <input type="text" name="lastName" placeholder="Last name" ref={node => 
(lastName = node)} ></input>
          <button onClick={handleAddContact} disabled={isAdding}>
            Save
          </button>
        </Modal>
        <p>{error}</p>
        <p>Total {contacts.length} contacts</p>
        <div>
          <ContactList contacts={contacts} />
        </div>
      </div>
    );
  }
}
const mapStateToProps = ({ contactInfo }) => {
  console.log(contactInfo)
  return ({
    isAdding: contactInfo.isAdding,
    error: contactInfo.error,
    contacts: contactInfo.contacts,
    isFetching: contactInfo.isFetching,
    isRegisterModalOpen: contactInfo.isRegisterModalOpen
  });
}

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      fetchContacts,
      addContact,
      toggleAddContactModal
    },
    dispatch
  )

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Contacts)

从“React”导入React
从“react dom”导入react dom
从“反应模态”导入模态
从“redux”导入{bindActionCreators}
从“react redux”导入{connect}
进口{
获取联系人，
addContact，
toggleAddContactModal
}来自“..../modules/contacts”
从“../../components/ContactList”导入联系人列表；
Modal.setAppElement（“#根”）
类Contacts扩展React.Component{
componentDidMount（）{
this.props.fetchContacts（）；
}
render（）{
const{fetchContacts，isFetching，contacts，
错误，isAdding，addContact，isRegisterModalOpen，
toggleAddContactModal}=this.props；
让我们直呼其名；
让姓；
const handleAddContact=（e）=>{
e、 预防默认值（）；
如果（！firstName.value.trim（）| |！lastName.value.trim（））{
返回
}
addContact（{firstName:firstName.value，lastName:lastName.value}）；
};
返回(
联络
取得联系
添加联系人
（firstName=node）}>
（lastName=node）}>
拯救
{错误}

总共{个触点。长度}个触点

);
}
}
常量mapStateToProps=（{contactInfo}）=>{
console.log（contactInfo）
返回({
isAdding:contactInfo.isAdding，
错误：contactInfo.error，
联系人：contactInfo.contacts，
isFetching:contactInfo.isFetching，
isRegisterModalOpen:contactInfo.isRegisterModalOpen
});
}
const mapDispatchToProps=调度=>
bindActionCreators(
{
获取联系人，
addContact，
toggleAddContactModal
},
派遣
)
导出默认连接(
MapStateTops，
mapDispatchToProps
)（联系人）

检查onSearchPressed（）上的console.log（this.props）并确保它不是null@QoPconsole.log（this.props）已正确填充。这太奇怪了！尝试将exports.addToSaved=函数addToSaved（）{}更改为exports.addToSaved=函数（）{}@QoP仍然只到达操作日志语句，而不是reducer日志语句：\n您没有调度操作<代码>this.props.addToSaved（）应该是

this.props.dispatch（addToSaved（））我也做过几次同样的事情，但它只是默默地失败了，这让我很恼火。当一个成年人几乎要哭了。。。经过数小时的调试后，会出现分解问题。