在独立组件 react 和 redux 之间传递数据

Question

我对 react 和 redux 很陌生。我正在尝试将数据从一个组件传递到另一个组件。但它没有父子关系，并且彼此独立。谁能帮我做到这一点？下面是我的代码。

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);

另一个文件是我要发送的地方，EmpNumber 在下面，

class EmpDetail extends React.Component {
  render() {
    return (
      <div className="container">
        <input type="text"/>
      </div>
    );
  }
}

export default EmpDetail;

Answer 1

好的，这里是一个例子。我假设您已经配置了所有 Redux 存储，即创建存储、rootReducer 等...因为这完全是一个单独的帖子。

所以基本的想法是，当你想更新你的 Redux 存储状态时，你 dispatch 一个 action 到 reducer 并发送一个有效载荷随之而来的数据。这听起来令人困惑，但本质上它只是告诉减速器你想做什么，即“嘿减速器，我希望你更新_EMP_NUMBER，这是数据”。

reducer 基本上只是一个巨大的 switch 语句，如下所示，它只是根据您给定的操作返回状态的新部分。

再说一次，我对您的架构、商店等一无所知，所以这都是基于假设的，但这就是您可能看到的样子。

减速器

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;
    }
}

考虑到上述情况，您可以像这样更新您的代码。

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);

然后你的 EmpDetail 类只需要连接到商店（或将数据作为道具传递，但更容易连接它）。

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);

我真的希望这会有所帮助，当您看不到这将在哪里结束时，很难解释这一点！