- 首页
- 其他开发
- 在独立组件 react 和 redux 之间传递数据
在独立组件 react 和 redux 之间传递数据
[英] Pass data between independent component react and redux
本文介绍了在独立组件 react 和 redux 之间传递数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 react 和 redux 非常陌生.我正在尝试将数据从一个组件传递到另一个组件.但它没有父子关系，并且彼此独立.谁能帮我做到这一点?下面是我的代码.
export class EmpSearch extends React.Component {构造函数(道具){超级(道具)；this.state = {员工编号:''};}updateEmpNumber(e) {this.setState({Empnumber: e.target.value});}使成为() {返回 (<div className="row"><表格><div className="form-group"><label htmlFor="Empnumber">Emp Number</label><input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</表单>
);}}函数 mapStateToProps(state){返回{雇员编号:state.Empnumber};}导出默认连接(mapStateToProps)(EmpSearch)；
另一个文件是我想发送 EmpNumber 的地方，
class EmpDetail extends React.Component {使成为() {返回 (<div className="容器"><input type="text"/>
);}}导出默认 EmpDetail；
解决方案
好的，这是一个例子.我将假设您已经配置了所有 Redux 存储，即创建的存储、rootReducer 等......因为那完全是一个单独的帖子.
所以基本的想法是，当你想更新你的 Redux 存储状态时，你调度一个动作到reducer并发送一个payload数据连同它.这听起来令人困惑，但本质上只是告诉减速器你想做什么，即嘿减速器，我想让你 UPDATE_EMP_NUMBER，这是数据".
reducer 基本上只是如下所示的大量 switch 语句，它只是根据给定的操作返回状态的新部分.
再说一次，我对您的架构、商店等一无所知，所以这都是基于假设的，但这里是您的样子.
减速器
导出默认函数employeeReducer(state = [], action) {开关(动作.类型){案例 UPDATE_EMP_NUMBER:{const Empnumber = action.payload;返回 {...状态，员工人数};}案例ANOTHER_ACTION:{//等等...}默认:返回状态；}}
考虑到上述情况，您可以像这样更新代码.
EmpSearch
export class EmpSearch extends React.Component {//不再需要，因为状态进入 Redux 而不是本地组件状态/*构造函数(道具){超级(道具)；this.state = {员工编号:''};}*/updateEmpNumber(e) {//无需在此处设置状态，因为您现在正在将此数据传递给 Redux 存储//this.setState({Empnumber: e.target.value});//相反，我们将分派一个动作并将 empNumber 发送到 reducerthis.props.dispatch({类型:'UPDATE_EMP_NUMBER'，有效载荷:e.target.value});}使成为() {返回 (<div className="row"><表格><div className="form-group"><label htmlFor="Empnumber">Emp Number</label><输入类型=文本"className =表单控件"id=员工编号"占位符=员工编号"value={this.props.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</表单>
);}}函数 mapStateToProps(state){返回 {雇员编号:state.Empnumber}}导出默认连接(mapStateToProps)(EmpSearch)；
然后你的 EmpDetail 类只需要连接到商店(或者将数据作为道具传递，但更容易连接它).
EmpDetail
class EmpDetail extends React.Component {使成为() {const empNumber = this.props.Empnumber;返回 (<div className="容器">员工编号 = {员工编号}
);}}函数 mapStateToProps(state){返回 {雇员编号:state.Empnumber}}导出默认连接(mapStateToProps)(EmpDetail)；
我真的希望这会有所帮助，当您看不到最终结果时，很难解释这一点！
I am very new to react and redux.I am trying to pass data from one component to another. but it has no parent child relation and it is independent from each other. can anyone help me to do this? below are my code.
export class EmpSearch extends React.Component {
constructor(props) {
super(props);
this.state = {
Empnumber: ''
};
}
updateEmpNumber(e) {
this.setState({Empnumber: e.target.value});
}
render() {
return (
<div className="row">
<form>
<div className="form-group">
<label htmlFor="Empnumber">Emp Number</label>
<input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state){
return{
Empnumber: state.Empnumber
};
}
export default connect(mapStateToProps)(EmpSearch);
The other file is where i want to send the EmpNumber is below,
class EmpDetail extends React.Component {
render() {
return (
<div className="container">
<input type="text"/>
</div>
);
}
}
export default EmpDetail;
解决方案
Ok so here is an example. I'm going to assume you have all the Redux store configured already, i.e. store created, rootReducer etc... as that's a separate post altogether.
So the basic idea is that when you want to update your Redux store state you dispatch an action to the reducer and send a payload of data along with it. This sounds confusing but essentially it's just to tell the reducer what you want to do i.e. "Hey reducer I want you to UPDATE_EMP_NUMBER and here is the data".
A reducer is basically just a massive switch statement as per below, that simply returns the new part of state based on your given action.
Again I know nothing about your architecture, store etc so this is all assumption based but here is what it may look like for you.
Reducer
export default function employeeReducer(state = [], action) {
switch (action.type) {
case UPDATE_EMP_NUMBER:
{
const Empnumber = action.payload;
return {
...state,
Empnumber
};
}
case ANOTHER_ACTION:
{
// etc...
}
default:
return state;
}
}
With the above in mind, you could update your code like so.
EmpSearch
export class EmpSearch extends React.Component {
// Not needed anymore as state going to Redux and not local component state
/*
constructor(props) {
super(props);
this.state = {
Empnumber: ''
};
}
*/
updateEmpNumber(e) {
// No need to set state here as you are now passing this data to Redux store
// this.setState({Empnumber: e.target.value});
// Instead we will dispatch an action and send the empNumber to the reducer
this.props.dispatch({
type: 'UPDATE_EMP_NUMBER',
payload: e.target.value
});
}
render() {
return (
<div className="row">
<form>
<div className="form-group">
<label htmlFor="Empnumber">Emp Number</label>
<input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.props.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state){
return {
Empnumber: state.Empnumber
}
}
export default connect(mapStateToProps)(EmpSearch);
Then your EmpDetail class just needs to connect to the store (or be passed the data as a prop, but easier to just connect it).
EmpDetail
class EmpDetail extends React.Component {
render() {
const empNumber = this.props.Empnumber;
return (
<div className="container">
Empnumber = {empNumber}
</div>
);
}
}
function mapStateToProps(state){
return {
Empnumber: state.Empnumber
}
}
export default connect(mapStateToProps)(EmpDetail);
I really hope this helps, it's so hard to explain this when you can't see where this is going to end up!
这篇关于在独立组件 react 和 redux 之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
