Wie verwendet man getState mit redux thunk

Question

Ich habe eine Aktion Creator namens searchResult(), die Daten aus Firebase und dann filtert es gegen ein Stück des Staates namens 'Suche' von einem anderen Reducer namens SearchReducer (erstellt von der Aktion Creator searchChanged ()). So sieht der Code aus:

export const searchResult =() => { 
    const { currentUser } = firebase.auth(); 
     return (dispatch, getState) => { 

    firebase.database().ref(`/users/${currentUser.uid}/entries`) 
     .orderByChild('uid') 
     .on('value', snapshot => { 
      const myObj = snapshot.val(); 
      const { search } = getState().searching; 

      const list = _.pickBy(myObj, (((value) => 
      value.make.indexOf(search) !== -1 || 
      value.model.indexOf(search) !== -1) && ((value) => 
      value.sold === false))); 


      dispatch({ type: SEARCH_RESULT_SUCCESS, payload: list }); 
    }); 
    }; 
    }; 

Der Code wird ausgeführt, aber nichts wird gefiltert. Mit dem Redux-Debugger kann ich sehen, dass sich 'Suchen' ändert. Stimmt etwas nicht mit meiner Syntax? Jede Hilfe wäre willkommen. Hier ist andere Stücke von meinem Code:

Der Aktions Creator searchChanged():

export const searchChanged = (text) => { 
    return { 
     type: SEARCH_CHANGED, 
     payload: text 
    }; 
    }; 

Der Reducer SearchReducer:

import { 
    SEARCH_CHANGED, 
} from '../actions/types'; 

const INITIAL_STATE = { 
    search: '', 
}; 

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case SEARCH_CHANGED: 
     return { ...state, search: action.payload }; 
    default: 
     return state; 
    } 
    }; 

search() 's Reducer genannt EntryReducer:

import { 
    SEARCH_RESULT_SUCCESS, 
    ENTRY_FETCH_SUCCESS, 
    SOLD_RESULT_SUCCESS 
} from '../actions/types'; 

const INITIAL_STATE = []; 


export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case ENTRY_FETCH_SUCCESS: 
     return action.payload; 
    case SEARCH_RESULT_SUCCESS: 
     return action.payload; 
    case SOLD_RESULT_SUCCESS: 
     return action.payload; 
    default: 
     return state; 
    } 
}; 

Hier ist die Funktion combinateReducers():

import { combineReducers } from 'redux'; 
import AuthReducer from './AuthReducer'; 
import EntryFormReducer from './EntryFormReducer'; 
import EntryReducer from './EntryReducer'; 
import SearchReducer from './SearchReducer'; 
import PasswordReducer from './PasswordReducer'; 

export default combineReducers({ 
    auth: AuthReducer, 
    entryForm: EntryFormReducer, 
    employees: EntryReducer, 
    searching: SearchReducer, 
    pw: PasswordReducer 
}); 

Und hier, wo searchChanged() von search gefolgt() aufgerufen wird:

class Search extends Component { 

    //onSearchChange() is just the onChangeText binding for the text input. 
    onSearchChange(text) { 
    this.props.searchChanged(text); 
    searchResult(); 
} 

======================= == Neu editierter Teil =============================

Jetzt verwende ich mapDispatchToProps innerhalb meiner Suchkomponente . Aber ich bekomme immer noch Fehler, oder einfach passiert nichts, wenn ich in die Sucheingabe tippe. Die gesamte Komponente sieht wie folgt aus (es gibt einen Fehler zurück, dass search keine Funktion ich meine Richtung von https://learn.co/lessons/map-dispatch-to-props-readme bekommen.):

import React, { Component } from 'react'; 
import { View } from 'react-native'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { Icon } from 'react-native-vector-icons'; 
import { searchChanged, searchResult } from '../actions'; 
import Card from './common/Card'; 
import CardSection from './common/CardSection'; 
import Input from './common/Input'; 


class Search extends Component { 

    onSearchChange(text) { 
    this.props.searchChanged(text); 
    this.store.props.dispatch(searchResult()); 
    } 


    render() { 
    return (
     <View> 

     <Input 
     placeholder="Search" 
     onChangeText={this.onSearchChange.bind(this)} 
     value={this.props.search} 
     returnKeyType={'search'} 
     /> 

     </View> 
    ); 
    } 
} 


const mapStateToProps = state => { 

    return { 
    search: state.searching.search 
    }; 
    }; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    searchResult: searchResult 
    }, dispatch); 
}; 

export default connect(mapStateToProps, { searchChanged }, mapDispatchToProps)(Search); 

Nur mit:

onSearchChange(text) { 
this.props.searchChanged(text); 
dispatch(searchResult()); 
} 

gibt einen Fehler, Versand ist eine nicht deklarierte Variable. Wie formatiere ich diese Komponente korrekt, sodass sie mapDispatchToState korrekt versteht?

Answer 1

Von Ihrem App-Level-Code.

Import searchResult von '../actions/list-actions';

onSearchChange(text) { 
    this.props.searchResult(text); 

    } 


const mapStateToProps = (state) => { 

    return { 
     yourListName: state.yourListName, 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     searchResult: (data) => dispatch(searchResult(data)), 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Search) 

Dann in Aktionen ...

export const SEARCH_RESULT_SUCCESS = list => ({ 
    type: 'SEARCH_RESULT_SUCCESS', 
    payload: list, 
}); 

    export const searchResult = (data) => dispatch { 
    const { currentUser } = firebase.auth(); 
     return (dispatch, getState) => { 

    firebase.database().ref(`/users/${currentUser.uid}/entries`) 
     .orderByChild('uid') 
     .on('value', snapshot => { 
      const myObj = snapshot.val(); 
      const { search } = getState().searching; 

      const list = _.pickBy(myObj, (((value) => 
      value.make.indexOf(search) !== -1 || 
      value.model.indexOf(search) !== -1) && ((value) => 
      value.sold === false))); 
     //!!!Do you filtering HERE based on the data (or search value) passed in 
      through the app level. 
     //Then dispatch the save of the newly edited list to your redux store. 
     //Or based on your use case take just the article that matched, and store 
      it to a searched category in the store. 
      dispatch(SEARCH_RESULT_SUCCESS(list)); 
    }); 
    }; 
    }; 

};