У меня есть собственный редуктор и подключенный компонент для изменения его состояния. Теперь я хотел бы использовать это состояние в качестве постоянного фильтра для элементов списка. Я понимаю, что элементы списка связаны с состоянием редукции, поэтому я надеюсь, что смогу получить к нему доступ через реквизиты компонента списка, но не смог найти способ, как это сделать.
Как использовать состояние пользовательского редуктора в качестве постоянного фильтра в «Списке»?
Ответы (2)
Компонент List
подключен, но не ваш.
import { connect } from "react-redux";
const MyList = ({ is_published, ...props }) => (
<List {...props} filter={{ is_published }}>
</List>
);
const mapStateToProps = state => ({
is_published: state.myCustomReducer.is_published,
});
export default connect(mapStateToProps, undefined)(MyList);
Изменить:
Только что узнал, что мы не обновляем данные при изменении этого реквизита. Это ошибка, и вы можете открыть вопрос об этом.
А пока есть обходной путь: создайте настраиваемую сагу, слушающую все, что угодно. действие, которое вы используете вместе с вашим настраиваемым редуктором (в моем примере я назову его SET_IS_PUBLISHED
). Эта пользовательская сага должна put
создавать changeListParams
действий из react-admin
с вашим фильтром.
Вероятно, это будет выглядеть так (не проверено):
import { takeEvery, put, select } from 'redux-saga/effects'
import { changeListParams } from 'react-admin'
import { SET_IS_PUBLISHED } from './isPublished'
const getCurrentListParams = (state, resource) => {
const resourceState = state.admin.resources[resource]
return resourceState.list.params
}
function handleSetPublished({ payload }) {
const currentParams = yield select(getCurrentListParams)
const newParams = {
// Keep the current params
...currentParams,
// Override the filter
filter: {
// Keep the current filter
...currentParams.filter,
// Only override the is_published
is_published: payload
}
}
// Dispatch the action for the `posts` resource
yield put(changeListParams('posts', newParams))
}
export default function* () {
yield takeEvery(SET_IS_PUBLISHED, handleSetPublished)
}
просто чтобы перенести это в 2021 год, вы можете использовать хук useSelector redux, чтобы получить ваше пользовательское состояние:
import { useSelector } from 'react-redux';
const MyCustomThing = (props) => {
const is_published = useSelector(state => state.customState.is_published);
}
Для полноты, react-admin предоставляет свойство customReducers для своего компонента <Admin>
, чтобы вы могли расширить состояние редукции своими пользовательскими значениями:
const customStateReducer = (customState = { is_published: false }, { type, payload }) => {
if (type === 'IS_PUBLISHED') customState.is_published = payload.is_published;
return customState;
}
<Admin customReducers={{ customState: customStateReducer }} ...>
etc