javascript - 用组件实现 Redux-Search

Question

总结:

既然这个问题已经解决了，我会写一篇博文重新创建和解决

将 Redux-Search 添加到我的应用程序。我已经正确设置了商店，我的 redux 开发工具显示搜索操作在 init 上开始并收到正确的结果，但是当我实际尝试使用提交的值搜索资源时输入字段，我没有得到任何返回。我完全被卡住了，我尝试了一堆不同的结构来尝试获得任何结果以在组件 console.log 中返回。我想我只是不明白 reselect 包是如何工作的，如何正确地将文本传递给它，以及如何在我的组件中获取结果。如果我能克服这个障碍并看到 Action 创建者返回的东西，我就可以从那里得到它。

这是我的代码:

Reducers/Data.js给出这个文件的背景。我有两个 reducer 。一种称为 Auth，一种称为 Data(在单独的文件中)。每个都有自己的初始状态。这里显示的初始状态是 data.js 中定义的一部分。

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

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

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

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

Reducers/Index.js

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

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

export default rootReducer;

Store/ConfigureStore.js

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 console.log(`explore search: ${selectors.thingIds}`); 是我真正需要开始工作的唯一部分。我只是想返回从 Action 创建者 searchThings 返回的任何结果，这应该会引导我朝着正确的方向前进。

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

我不明白的组成部分我知道这段代码不可能是正确的。我把它留在了第一个简单示例 bvaughn 和更复杂的示例之间的某个地方。但是，如果有人可以解释我哪里出错了？

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

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

• > https://github.com/bvaughn/redux-search (组件/商店的基本示例)
• > https://github.com/bvaughn/redux-search/tree/master/website (来自开发人员演示的更高级示例。
• > https://bvaughn.github.io/redux-search/ (演示)

这是 init 正确返回的...据我所知我已经正确设置了商店？:

这是通过在顶层调用 console.log(store.getState()); 我的商店状态的图片。据我所知，这表明它在 data.resources 之下。

一旦我弄清楚了这个傻瓜，我将写一篇文章来尝试为那些想要使用这个库的人修补一些文档。

Answer 1

第一个问题是当您的应用程序的“搜索”按钮被点击时，redux-search SEARCH reducer 没有被触发。 (我可以看到调试并看到它从未达到。)那是因为您的点击处理程序正在调用 unconnected 方法 actions.searchThings(value) 而不是使用 connected 方法 this.props.searchThings(value)。

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

所以解决方法是:

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

您可以像这样将它连接到您的列表: