Как создать фильтр товаров на react, если фильтр и товары выводястя в разных компонентах?

Question

[Selbi]

Уважаемые знатоки react+redux, в процессе изучения react столкнулась с проблемой, и не понимаю как вообще такое можно сделать, помогите пожалуйста. Суть проблемы: используется react, redux и react-router, "главный" компонент (App) выводит остальные компоненты вот так:

export default function App() {
  return (
    <BrowserRouter>
    <div>
        {/* Тут фильтры в сайдбаре */}
        <Filter />

        <Switch>
            {/* а тут в ProductsContainer выводятся сами товары */}
            <Route exact path="/" component={ProductsContainer} />
        </Switch>
    </div>
    </BrowserRouter>
  )
}

Вопрос: как при выборе характеристик в фильтре, отфильтовать товары в другом компоненте?
Нагуглила решение без использования роутера, что можно "связать" компоненты товаров и фильтров через родительский компонент, но вот решение с роутером не могу найти. Прошу знающих направить в правильное русло, что можно почитать по теме, и вообще, насколько правильный у меня подход, быть может есть более адекватное решение.

Answer 1

[Максим]

Вам нужно хранить состояние фильтров в редьюсере (или редьюсерах), и затем в компонентах подписываться на эти "кусочки" с помощью mapStateToProps. Вот и все)

Суть Redux как раз в том, что у вас есть единое состояние всего вашего проекта, и где бы вы ни были (через роутер или без) - вы можете просто приконнкектиться к стору (connect) и вытащить нужные данные через mapStateToProps

Comments

[Selbi]

Редьюсер:

export function products(state = initialState, action) {
    switch (action.type) {
        case GET_PRODUCTS_REQUEST:
            return { ...state, products: [], isFetching: true, error: '' }

        case GET_PRODUCTS_SUCCESS:
            return { ...state, products: action.payload, isFetching: false, error: '' }

        case GET_PRODUCTS_FAIL:
            return { ...state, error: action.payload.message, isFetching: false }

        default:
            return state
    }
}

ProductContainer

const mapStateToProps = store => ({ products: store.products })

const mapDispatchToProps = dispatch => ({
    getProducts: () => dispatch(getProducts()),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ProductsContainer)

Вроде все правильно тут, но вот дальше не соображу как быть

[Selbi]

И еще - что считается хорошей практикой - фильтр на стороне сервера или на клиенте?

[Selbi]

Хотя вроде пришло понимание ) надеюсь )
Если в редьюсер добавлю

case 'FILTER':
    return { ...state, products: action.payload, isFetching: false, error: '' }

а в ProductsActions

export const filterProducts = colors => (dispatch, getState) => {
  dispatch({
    type: 'FILTER',
    payload: getState().products.products.filter(product => colors.includes(product.color)),
  })
}

и в компоненте фильтра вызывать this.props.filterProducts(['red', 'green']), то все работает. Это правильно, или есть более правильный подход? )

[Максим]

Selbi, нужно не добавлять в редьюсере, а разделить редьюсеры (сущности у вас две сейчас из примера: продукты и фильтры). Для чего разделять? чтобы не было лишних перерисовок, подробнее здесь: https://maxfarseer.gitbooks.io/redux-course-ru-v2/...

[Selbi]

Максим, Только что поняла, что учусь по Вашим учебникам ) Примите слова благодарности, делаете действительно крутую работу!

[Максим]

Selbi, спасибо) если разобрались - отметьте ответом

[Selbi]

Максим, Разобралась, но только с одним редьюсером получилось, не пойму как можно разделить на 2 редьюсера. Ну для первого раза думаю пойдет, так как важно чтобы все работало, а добиться этого же результата только более правильным путем видимо только с опытом можно ). Спасибо за помощь!

[Капитан Какао]

Максим, случайно зашёл в эту тему, случайно увидел ссылку на эту онлайн книгу, и офигел.
Очень круто и как раз в тему, тоже учу редакс и эта книга находка. Спасибо большое Максим!