как передать реквизиты param в контейнер

Question

У меня есть селектор, которому нужен идентификатор пользователя, в идеале он должен быть из параметров.

localhost: 3001 / users / 1

селектор

export const getPosts = () => // this gets all posts
  createSelector(
    postSelector,
    (state) => state.posts,
 );

export const getUserPosts = (params) =>
    createSelector(
        postSelector,
        state => state.posts.filter(user => user.userId === params.userId)
    )

как передать параметры компоненту контейнера.

контейнер

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import Profile from "./../components/profile/profile"
import { getUserPosts } from "./../selectors/selectors";

const mapStateToProps = createStructuredSelector({
    posts: getUserPosts(), // how do i pass params within this selector
});

export default connect(
    mapStateToProps,
    null,
)(Profile);

Учитывая, что логика контейнера c отделена от составная часть.

Профиль

import React, { Component, useState, useEffect } from 'react';
export interface IProps {
    match?: any
}
class Profile extends Component<IProps, {}> {
    render() {
        console.log(this.props.match.params) // this needs to be passed to container
        return (
            <div>
            </div>
        )
    }
}

export default Profile;

В идеале вы можете добавить контейнерную логику c к компоненту профиля, но это будет выглядеть как анти-шаблон, так как компонент всегда затем контейнер.

Answer 1

Прежде всего mapStateToProps как функция имеет доступ к этим реквизитам в качестве второго аргумента , потому что объект сопоставления является подпоркой контейнера, который передается в Profile. Или другими словами без reselect это легко сделать как:

const mapStateToProps = (state, ownProps) => {
   return {
       posts: state.posts.filter(post => post.userId === ownProps.match.params.userId)
   }
}

---

Когда дело доходит до reselect, Я не использовал его , но я думаю эта часть повторного выбора README должна помочь вам.

Если я правильно прочитал, вам нужно написать селектор так, как он имеет props как второй аргумент. Эти реквизиты должны передаваться из mapStateToProps в селектор точно так же, как аргумент state.

Не уверен, поможет ли это просто:

export const getUserPosts =
    createSelector(
        postSelector,
        state, ownProps => state.posts.filter(post => post.userId === ownProps.match.params.userId)
    )

const mapStateToProps = createStructuredSelector({
    posts: getUserPosts,
});

Может быть, postSelector нуждается в изменении.

---

Кроме того, как запасной вариант, я думаю, что ваш текущий код может работать как:

const mapStateToProps = (state, ownProps) => {
   return {
       posts: getUserPosts(ownProps.match.params)(state)
   }
}

Answer 2

Это была логика c, которую я смог реализовать, чтобы она работала с селектором.

const mapStateToProps = (state, ownProps) => createStructuredSelector({
    posts: getUserPosts(ownProps.match.params),
})