[英]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.