Question

我正在尝试学习redux并做出反应，我正在尝试创建CRUD应用程序，到目前为止我做了插入/删除，我也做了更新逻辑，但我正在努力如何从我的一行发送数据表（当点击按钮'Editar'）到我左侧的表格时。每一方都是一个不同的组件，我认为最简单的方法是使用getElementById并填充字段，但是当我尝试保存时，做反应时将其作为空白输入。另一个选择是使用redux创建一个getId操作并从我的'Editar'按钮调用它，但是在执行操作后不知道如何将数据发送到我的其他容器。

任何提示都会有所帮助。

我的应用

Answer 1

安装react-redux并使用其中的connect函数。例如：

import React, {Component} from 'react';
import {connect} from 'react-redux';

class ExampleComponent extends Component {
    render() {

        const something = this.props.something; // in case you need to read part of the redux state

        const mydata='something'; // data from this component

        return (
            <div>
                <button onClick={()=>{this.props.sendData({data: mydata})}}>Send Data</button>
            </div>
        );
    }
}


// map state
function mapStateToProps(state) {
    return {
        something: state.something
    }
}

// map dispatch
function mapDispatchToProps(dispatch) {
    return {
        sendData: (data) => {
            dispatch({type:'SOME_TYPE_FOR_REDUCER', payload:data})
        }
    }
}

// connect and export
export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);

Answer 2

您可以在应用状态中创建一个包含要编辑的所选项目的状态。编辑器组件cab可以订阅该状态。当您单击Editar按钮时，它会触发一个动作EDIT_ITEM，它将使用要编辑的项目填充redux状态。

单击Ok按钮将更新项目的redux状态。

// State 
    const state = {
    items: [],
    selected: {}
}

    //Actions
    const EDIT_ITEM = 'edit'
    const UPDATE_ITEM = 'edit'
    //Reducers
    const reducer = (state, action) {
        switch({action, data})  {
            EDIT_ITEM: 
                return Object.assign({}, state, data)
            SAVE_ITEM: 
                //save based on id
        }
}

如何在组件之间发送数据redux / react

2 个答案: