は

Question

私はFirebaseからデータをつかみ、その後、SearchReducerと呼ばれる別の減速から「検索」と呼ばれる状態の部分に対してそれをフィルタリングし、検索結果（）と呼ばれるアクションの作成者は、（アクションの作成者searchChanged（で作成したサンク））。コードの外観は次のとおりです。

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 }); 
    }); 
    }; 
    }; 

コードは実行されますが、何もフィルタリングされません。 reduxデバッガでは、私は '検索'の変更を確認することができます。私の構文に何か問題はありますか？どんな助けもありがとう。ここに私のコードの他の部分です：

アクションクリエーターsearchChanged（）：

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

リデューサー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; 
    } 
    }; 

、検索結果（）の減速は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; 
    } 
}; 

ここにcombineReducers（）関数があります：

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 
}); 

そしてここsearchChanged（）は、検索結果（が続くと呼ばれている）だ：

class Search extends Component { 

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

======================= ==新しく編集パート===============================

今、私は私の検索コンポーネント内mapDispatchToPropsを使用しています。しかし、私はまだエラーが発生しているか、検索入力に入力すると何も起こりません。

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); 

のみ使用して：：

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

は、そのエラーを返します全体のコンポーネントは、この（。それは私がhttps://learn.co/lessons/map-dispatch-to-props-readmeから私の方向を取得しています、検索結果が関数ではないというエラーを返します）のように見えますディスパッチは宣言されていない変数です。このコンポーネントを正しくフォーマットして、mapDispatchToStateを正しく理解できるようにするにはどうすればよいですか？

Answer 1

あなたのアプリレベルのコードから。

インポート検索結果 '../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) 

...あなたはthis.props.searchResultへのSearchResult（）（）から自分のクラスであなたの行動を変更しようとしました

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)); 
    }); 
    }; 
    }; 

};