Несколько состояний Redux в одном компоненте

Question

Я хочу объединить несколько состояний в компонент (я использую TypeScript). Я заметил, что эта проблема обсуждалась 2 года go - Несколько состояний Redux в одном компоненте - Typescript, React, Redux . Я попробовал предлагаемое решение, но оно не сработало для меня. любое другое предложение?

type CompetitorProps =
CompetitorsStore.CompetitorsState // ... state we've requested from the Redux 
store
& StationsStore.StationsState
& typeof CompetitorsStore.actionCreators // ... plus action creators we've 
requested
& RouteComponentProps<any>; // ... plus incoming routing parameters


const Competitors = (props: CompetitorProps) => {

useEffect(() => {
    console.log("In Competitors. useEffect1");
    ensureDataFetched()
}, [])

useEffect(() => {
    console.log("In Competitors. useEffect2");
    ensureDataFetched()
}, [props.selectedStationID])

const ensureDataFetched = () => {
    props.requestCompetitors(props.selectedStationID);
}

return (
    <React.Fragment>
        <h1 id="tabelLabel">Competitors</h1>
        <TableContainer component={Paper}>
            <Table aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>Dessert (100g serving)</TableCell>
                        <TableCell align="right">ID</TableCell>
                        <TableCell align="right">Name</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {props.competitorsArray.map(competitor => (
                        <TableRow key={competitor.nCompetitorId}>
                            <TableCell component="th" scope="row"> 
                              {competitor.stCompetitorName}</TableCell>
                            <TableCell align="right"> 
                              {competitor.nCompetitorId}</TableCell>
                            <TableCell align="right"> 
                              {competitor.stCompetitorName}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    </React.Fragment>
   );
}

const mapStateToProps = (state: ApplicationState) => ({
competitors: state.competitors,
stations: state.stations
});

export default connect(
(state: ApplicationState) => { ...state.competitors, ...state.stations }, 
CompetitorsStore.actionCreators 
)(withRouter(Competitors as any));

//export default connect(
//    mapStateToProps, 
//    CompetitorsStore.actionCreators 
//)(withRouter(Competitors as any));

Answer 1

ОК, во-первых, сохраните свою функцию mapStateToProps, чтобы вы могли сосредоточить свое «слияние» там

connect(mapStateToProps, etc)

в зависимости от того, что вы сказали, что хотите поменять

competitors: state.competitors,
stations: state.stations

на одно свойство (то, что вы называете «слиянием»)

Не уверен, почему вы хотите это сделать, но в основном вы хотите создать один объект на одной пропе, который содержит как конкурентов, так и станции

Я сделал вывод из этого кода: { ...state.competitors, ...state.stations }

Поэтому измените ваше отображение на одно свойство:

competitorsAndStationsMerged: { ...state.competitors, ...state.stations }

, или вы можете сделать

competitorsAndStationsMerged: { competitors: state.competitors, stations: state.stations }

Это что вы пытаетесь сделать?