当我使用redux-search包

Question

我将redux添加到我的反应应用程序中，我的情况是：

我有一个组件有标签两类叫做：（主题，文件）每个都有树状数据列表，我需要在激活的标签内搜索，我找到了redux-search库提供可搜索的资源。

我将添加一段代码，请查看我的redux代码和redux-search包的实现。

TopicsReducer：

  export default function reducer(state = {
     topics: [], // should be searchble state.
     files: [], // should be searchble state.
     fetching: false,
     fetched: false,
     error: null
  }, action) {

  switch (action.type) {

    case "FETCH_TOPICS_PENDING": {
        return {...state, fetching: true};
    }

    case "FETCH_TOPICS_REJECTED": {
        return {...state, fetching: false, error: action.payload}
    }

    case "FETCH_TOPICS_FULFILLED": {
        return {
            ...state,
            fetching: false,
            fetched: true,
            topics: action.payload
        }
    }

    case "FETCH_FILES_FULFILLED": {
        return {
            ...state,
            fetching: false,
            fetched: true,
            files: action.payload
        }
    }
  }

      return state;
  }

store.js

import {applyMiddleware, compose, createStore} from "redux";
import {reduxSearch} from 'redux-search'
import reducer from './reducers';
import thunk from "redux-thunk";
import logger from 'redux-logger'

const middleware = applyMiddleware(thunk, logger);
const redux_search = reduxSearch({
  resourceIndexes: {
      topics: ['title', 'description'] // HERE should i tell reduxSearch i have topics and files
  },
  resourceSelector: (resourceName, state) => {
      return state.topics[resourceName]
  }
});

 export default createStore(reducer, compose(middleware, redux_search));

在组件中：

import React from "react";
import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import store from '../store';
import TreeNode from "./partials/TreeView/TreeNode";
import Search from "./partials/search";
import {connect} from 'react-redux'
import {fetchTopics} from "../actions/topicsActions";
import {createSelector} from 'reselect'
import {createSearchAction, getSearchSelectors} from 'redux-search'


const topics = state => state.topics;  // NOTE: i was using getIn()like in repo but show me error in console getIn is not a function for this i don't used.

const {
       text,
       result
      } = getSearchSelectors({
          resourceName: 'topics',
          resourceSelector: (resourceName, state) => 
               state.topics[resourceName]
      });

    const selectors = createSelector(
    [result, topics, text],
    (topicId, topics, searchText) => ({
          topicId,
          topics,
          searchText
     })
  );

  const actions = {
        searchTopics: createSearchAction('topics')
  };

@connect(selectors, actions)
class Topics extends React.Component { ....

在组件内部，我使用函数在更改选项卡时发送数据。

 // index: tab index.
 fetchData(index = this.state.tabIndex) {
    this.props.dispatch(fetchTopics(index))
 }

控制台错误：

• 谁解决了这个错误？
• 这个实现与我一起搜索主题和文件吗？

Answer 1

dispatch仅在未提供mapDispatchToProps的情况下注入包装组件。

来自docs：

  

如果您没有提供自己的mapDispatchToProps功能或对象充满动作创建者，则默认的mapDispatchToProps实现只会将dispatch注入您的组件的道具。

如果您想在行动之外加入dispatch，请尝试：

const actions = (dispatch) => ({
    ...bindActionCreators({ searchTopics: createSearchAction('topics') }, dispatch),
    dispatch
})