![](/img/trans.png)
[英]How do i call a useReducer dispatch function from another file, which is not a react component? (without using Redux)
[英]How do I map dispatch to props within a recursively nested component using React and Redux?
我正在嘗試使用 Redux 制作一個顯示家族樹的應用程序。 每個人都顯示在一個盒子里,盒子里有通往他們父母的線。 我想要一個功能,如果你點擊一個人的“卡片”,你會看到一個顯示更多傳記信息的彈出窗口。 我遇到的麻煩是將調度操作映射到樹下比根級別人員更遠的任何組件中。 當我點擊頂部的“約翰”時,它按預期工作,但是他的任何祖先都壞了。 希望我只是遺漏了一些明顯的東西!
以下是組件:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {getFamily} from '../redux/family.actions'
import "./Family.css";
import Person from './Person';
class Family extends Component {
render() {
const {rootPerson} = this.props;
return (
<div className="family family-container">
<ul>
<Person key={rootPerson.id} info={rootPerson}/>
</ul>
</div>
)
}
}
const mapStateToProps = (state) => ({
rootPerson: state.family.allFamilyMembers[0]
});
const mapDispatchToProps = dispatch => ({
getFamilyFromStore: () => dispatch(getFamily())
});
export default connect(mapStateToProps, mapDispatchToProps)(Family);
import React from 'react';
import {connect} from 'react-redux';
import {selectPerson} from '../redux/family.actions'
import "./Person.css";
const Person = props => (
<li className="oc-hierarchy" onClick={() => props.selectPerson(props.info)}>
<div className="card card-body oc-node">
<h1>{props.info.name}</h1>
</div>
{props.info && props.info.parents && props.info.parents.length > 0 && (
<ul>
{props.info.parents.map(child => (
<Person info={child} />
))}
</ul>
)}
</li>
);
const mapDispatchToProps = dispatch => ({
selectPerson: (person) => dispatch(selectPerson(person))
});
export default connect(null, mapDispatchToProps)(Person);
import React from 'react';
import {connect} from 'react-redux';
import './App.css';
import Family from './components/Family';
import PersonBio from './components/PersonBio';
function App({selectedPerson}) {
return (
<div className="App">
<Family />
{selectedPerson == null ? null : <PersonBio />}
</div>
);
}
const mapStateToProps = (state) => ({
selectedPerson: state.family.selectedPerson
});
export default connect(mapStateToProps) (App);
export const selectPerson = (person) => ({
type: 'SELECT_PERSON',
payload: person
})
const INITIAL_STATE = {
allFamilyMembers: [
{
id:0,
name: 'John',
parents: [
{
id:1,
name: 'Bill',
parents: [
{
id:3,
name: 'Bob',
parents: [
]
},
{
id:4,
name: 'Barb',
parents: [
]
},
]
},
{
id:2,
name: 'Mary',
parents: [
{
id:5,
name: 'Matt',
parents: [
{
id:7,
name: 'Mark',
parents: [
]
},
{
id:8,
name: 'Ruth',
parents: [
]
},
]
},
{
id:6,
name: 'Marge',
parents: [
]
},
]
}
]
}
],
selectedPerson: null
}
const familyReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'GET_FAMILY':
return state;
case 'SELECT_PERSON':
return {
...state,
selectedPerson: action.payload
};
default:
return state;
}
}
export default familyReducer;
實際上,您並不了解 ReactJS 的基本原理,您從未將selectPerson
function 傳遞給Person
組件,請注意這部分代碼:
<Person key={rootPerson.id} info={rootPerson}/>
您應該將selectPerson
傳遞給這一行。 否則,您在Person
組件中將其視為undefined
<Person key={rootPerson.id} info={rootPerson} selectPersion={() => {}} />
現在聲明了selectPerson
並且您在Person
組件中得到了noOp
function 而不是undefined
。 這是您的問題的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.