How to use a custom reducer's state as a permanent filter in a <List>?

こ雲淡風輕ζ 提交于 2019-12-24 20:15:30

问题


I have a custom reducer and a connected component to change its state. Now I'd like to use this state as a permanent filter on List elements. I understand the List elements are connected to the redux-state, so I hope I'm able to access it through the List component's props, but couldn't find a way how to do that.


回答1:


The List component is connected but not yours.

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

Edit:

Just found out we don't update data when this prop change. This is a bug and you can open an issue about it.

In the mean time, here's a workaround: Create a custom saga listening to whatever action you use alongside your custom reducer (I'll call it SET_IS_PUBLISHED for my example). This custom saga should put the changeListParams action creator from react-admin with your filter.

It will probably looks like this (not tested):

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


来源:https://stackoverflow.com/questions/51378884/how-to-use-a-custom-reducers-state-as-a-permanent-filter-in-a-list

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!