我正在使用react-redux应用程序,由于某种原因,我调用的操作没有到达reducer(我目前只有一个日志语句)。我附上了我觉得相关的代码,我们将非常感谢任何贡献。
在组件中的函数内调用的动作:
onSearchPressed() {
console.log('search pressed');
this.props.addToSaved();
}
动作/ 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
}
}
减速器/ 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;
}
}
减速器/ index.js:
const { combineReducers } = require('redux')
const items = require('./items')
const rootReducer = combineReducers({
items: items
})
module.exports = rootReducer
商店/配置-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;
答案 0 :(得分:6)
正如Rick Jolly在您的问题评论中提到的那样,onSearchPressed()
函数实际上并没有调度该操作,因为addToSaved()
只是返回一个操作对象 - 它不会发送任何东西。
如果要从组件调度操作,则应使用react-redux将组件连接到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)
有关详细信息,请参阅'Usage With React' section of the Redux docs。
答案 1 :(得分:0)
最近,我遇到了这样的问题,发现我曾经使用过动作导入,但是它必须来自道具。检查出toggleAddContactModal的所有用法。就我而言,我错过了导致此问题的解构语句中的toggleAddContactModal。
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)