Question

摘要：

现在此问题已解决，我将在博客文章中介绍重新创建和解决方案

将Redux-Search添加到我的应用中。我已经正确设置了商店，我的redux开发工具显示了predict_fn = predictor.from_saved_model(modelname)上启动的搜索操作并收到了正确的结果，但是当我实际上试图使用通过输入字段提交的值来搜索资源时，我什么也得不到。我完全被困住了，我已经尝试了许多不同的结构来尝试将任何结果返回到组件console.log中。我想我只是不了解reselect包是如何工作的，如何正确传递文本以及如何在组件中获取结果。如果我能克服这一障碍并看到动作创建者返回的内容，那么我将能够从那里得到帮助。

这是我的代码：

Reducers / Data.js 为该文件提供背景。我有两个减速器。一种叫做Auth，一种叫做Data（在单独的文件中）。每个都有自己的初始状态。此处显示的初始状态是data.js中定义的状态的一部分。

init

Data / Things.js 这是我要导入到data.js文件中的initialState中的数据的示例。

import things from '../data/things';

const initialState = {
  statusText: null,
  thing: null,
  resources: {
    things,
  },
}

Reducers / Index.js

const things = [
  {
    id: 1,
    name: "example name 1",
  },
...

Store / ConfigureStore.js

import auth from './auth';
import data from './data';

const rootReducer = combineReducers({
  routing: routerReducer,
  /* your reducers */
  search: searchReducer,
  auth,
  data,
});

export default rootReducer;

组件

console.log import rootReducer from '../reducers'; const enhancer = composeWithDevTools( applyMiddleware(thunkMiddleware, ...debugware), reduxSearch({ resourceIndexes: { things: ['name'], }, resourceSelector: (resourceName, state) => { return state.data.resources[resourceName]; }, }), ); export default function configureStore(initialState) { const store = createStore( rootReducer, initialState, enhancer, );实际上是我需要工作的唯一部分。我只是想返回任何从动作创建者console.log(`explore search: ${selectors.thingIds}`);返回的结果，应该将我引向正确的方向。

searchThings

我不理解的组成部分 我知道这种代码是不可能的。在第一个简单示例bvaughn和更复杂的示例之间的某个地方，我处于一个非常混乱的状态。但是，如果有人可以解释我要去哪里错了？

const actions = {
  searchThings: createSearchAction('things'),
};

@connect(selectors, actions)
export class ExploreSearch extends Component {
  render() {
    console.log(`explore search: ${selectors.thingIds}`);

    return (
      <div>
        <Search
          placeholder="input search text"
          enterButton="Search"
          onSearch={(value) => actions.searchThings(value)}
          style={{ width: 200 }}
        />
      </div>
    );
  }
}

我关注的示例/有用的资源：

https://github.com/bvaughn/redux-search（组件/商店的基本示例）
https://github.com/bvaughn/redux-search/tree/master/website（开发人员演示中的更高级示例。
https://bvaughn.github.io/redux-search/（演示）

这里的初始化正确返回了...据我所知我已经正确设置了商店？：

这里是在顶层调用const resources = (state) => state.data.resources; const things = createSelector([resources], (resources) => resources.things); const { text, result } = getSearchSelectors({ resourceName: 'things', resourceSelector: (resourceName, state) => state.data.resources[resourceName], }); const selectors = createSelector( [result, things, text], (result, things, text) => ({ thingIds: result, things, searchText: text, }), );来显示我的商店状态的图片。据我所知，这表明它位于data.resources下。

一旦我弄清楚了这个问题，我将写一篇文章来尝试为那些想使用该库的人打补丁。

Answer 1

第一个问题是，单击应用程序的“搜索”按钮时，不会触发redux-search SEARCH减速器。（我看到一个调试，发现它从未达到。）这是因为您的点击处理程序正在调用 unconnected 方法actions.searchThings(value)而不是使用 connected 方法{ {1}}。

第二个问题是有关的。您的控制台日志引用的是未连接 this.props.searchThings(value)，而不是已连接 selectors.thingIds。

因此解决方法是：

完成此操作后，我会看到希望记录到控制台的ID。

您可以像这样将其连接到您的列表：

用组件实现Redux-Search

1 个答案: