2016-04-22 6 views
2

Ich arbeite an einer React-Redux-App und aus irgendeinem Grund erreicht die Aktion, die ich rufe, nicht den Reducer (in dem ich derzeit nur eine Log-Anweisung habe). Ich habe den Code angehängt, den ich für relevant halte, und alle Beiträge würden sehr geschätzt.Aktion löst keinen Reducer in React + Redux aus

Aktion innerhalb Funktion in der Komponente genannt:

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

Aktionen/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 
    } 
} 

Reduzierungen/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; 
    } 
} 

Minderer/index.js:

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) 

EDIT: Gesamte Komponente für 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

Überprüfen Sie console.log (this.props) auf onSearchPressed() und stellen Sie sicher, dass es nicht null ist – QoP

+0

@QoP console.log (this.props) ist korrekt ausgefüllt. – user3802348

+0

das ist komisch! versuche, exports.addToSaved = function addToSaved() {} zu exports.addToSaved = function() {} – QoP

Antwort

2

Als Rick Jolly in den Kommentaren zu Ihrer Frage erwähnt, Ihre onSearchPressed() Funktion nicht wirklich ist Diese Aktion wird gesendet, weil addToSaved() einfach ein Aktionsobjekt zurückgibt - es versendet nichts.

Wenn Sie Aktionen von einer Komponente versenden möchten, sollten Sie react-redux verwenden, um Ihre Komponente (n) mit Redux zu verbinden. Zum Beispiel:

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) 

die 'Usage With React' section of the Redux docs für weitere Informationen.

Verwandte Themen