Блог

Пытаюсь понять концепции сокращения, передавая значение первого текстового поля второму.

//Файл 1 — компонент класса

 import React, { Component } from 'react';
import { actionCreators } from '../store/CustomerInvoice';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class CustomerInvoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            accountId: "",
            customerName: ""
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        var name = event.target.name;
        var value = event.target.value;
        this.setState({ [name]: value });
        this.props.accountEntered(value);
    }

    render() {
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="accountId">Account Id:</label>
                    <input type="text" className="form-control" name="accountId" placeholder="Account Id" value={this.state.accountId} onChange={this.handleChange} />
                    <small id="accountId" className="form-text text-muted">Enter customer accound Id</small>
                </div>
                <div className="form-group">
                    <label htmlFor="customerName">Customer name:</label>
                    <input type="text" className="form-control" name="customerName" placeholder="Customer name" value={this.test}  />
                </div>
               
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        )
    }
}

const mapStateToProps = state => ({
    test: state.test
});

export default connect(
    mapStateToProps,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(CustomerInvoice);
  

//Файл 2 — Сокращение

 const accountIdEntered = 'ACCOUNT_ENTERED';
const initialState = { test: "" };

export const actionCreators = {
    accountEntered: (content) => ({
        type: accountIdEntered,
        payload: {
            content
        }
    })
}

export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === accountIdEntered) {
        return { ...state, test: action.content };
    }

    return state;
}
  

Не уверен, в чем проблема. Пожалуйста, помогите мне в решении проблемы.
В принципе, я хотел бы практически понять концепцию redux, где я могу отправить действие, изменить некоторое значение и прочитать значение из хранилища.

Сначала, если вы проверите, что ваше действие accountEntered возвращает content внутреннюю полезную нагрузку:

 accountEntered: (content) => ({
        type: accountIdEntered,
        payload: {
            content
        }
    })

  

Итак, когда вы отправляете действие в редукторе, вам нужно правильно получить данные из действия, т. Е. action.payload.content :

 export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === accountIdEntered) {
        return { ...state, test: action.payload.content };
    }

    return state;
}

  

Также вы можете установить расширение Chrome Redux Dev tools для визуализации, когда действие отправляется и как изменяется состояние редуктора и т. Д.