Резюме:
Теперь, когда эта проблема решена, я сделаю пост в блоге с повторным созданием и решением
Добавление Redux-Search в мое приложение. У меня правильно настроен магазин, мои инструменты для создания редукса показывают, что поисковое действие начинается с init и получается правильный результат, но когда я на самом деле пытаюсь найти ресурс, используя значение, указанное в поле ввода, я Я ничего не получаю. Я полностью застрял, и я попробовал кучу различных структур, чтобы попытаться получить ЛЮБОЙ результат для возврата в компоненте console.log. Полагаю, я просто не понимаю, как работает пакет повторного выбора, как правильно передать ему текст и как получить результат в моем компоненте. Если я смогу преодолеть это препятствие и увидеть, что что-то вернуло создателем действия, я смогу оттуда избавиться.
Вот мой код:
Переходники / Data.js
Чтобы дать представление об этом файле. У меня есть два редуктора. Один называется Auth, другой называется Data (в отдельных файлах). У каждого свое начальное состояние. Начальное состояние, показанное здесь, является частью того, что определено в data.js.
import things from '../data/things';
const initialState = {
statusText: null,
thing: null,
resources: {
things,
},
}
Данные / Things.js
Это пример данных, которые я импортирую в initialState в файле data.js.
const things = [
{
id: 1,
name: "example name 1",
},
...
Переходники / index.js
import auth from './auth';
import data from './data';
const rootReducer = combineReducers({
routing: routerReducer,
/* your reducers */
search: searchReducer,
auth,
data,
});
export default rootReducer;
Магазин / 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}`); действительно единственная часть, которая мне нужна для работы. Я просто пытаюсь вернуть ЛЮБЫЕ результаты, полученные от создателя действия 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,
}),
);
Примеры, за которыми я следовал / полезные ресурсы:
Вот инициализация, возвращающаяся правильно ... насколько я могу судить, я правильно настроил хранилище?:
Вот изображение состояния моего магазина, позвонив по номеру console.log(store.getState()); на верхнем уровне. Это показывает, что он находится под data.resources, насколько я могу судить.
Как только я выясню это, я собираюсь написать статью, чтобы попытаться исправить документацию для тех, кто хочет использовать эту библиотеку.