Нужна помощь для вызова действия с использованием избыточности, а также для обновления состояния компонента для одного события Click? - PullRequest
Новая
       12

Нужна помощь для вызова действия с использованием избыточности, а также для обновления состояния компонента для одного события Click?

2 голосов
/ 25 марта 2019

Я пытаюсь изучить Redux, просто добавляя / удаляя пользователей.У меня есть действие «ADD_PROFILE» с полезной нагрузкой: имя, номер счета.Нажав кнопку «Добавить», я захотел обновить магазин, скрыть форму «Добавить пользователя» и показать сообщение «Пользователь успешно добавлен».Если это в React, я могу иметь переменную логического состояния, обновить / сбросить переменную и переключить представления.Если бы я хотел сделать то же самое, используя Redux, не уверен, как.

Вот что я попробовал:

Действие 

export const addProfile = (name, account_number) => {

    console.log(name, account_number)
    return{
        type :'ADD_PROFILE',
        payload : {
            name : name,
            account_number : account_number
        }
    };
}

Редуктор: 

export default (profilesList=[],action) => {

    switch(action.type){
        case 'ADD_PROFILE':
            return [...profilesList, action.payload]
        case 'DELETE_PROFILE':
            return profilesList.filter(name => name!== action.payload.name)
        default:
            return profilesList;
    }

}

AddView.js 

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

import { addProfile } from '../actions';

class AddView extends React.Component{

    constructor(props) {
        super(props);
         this.state={
             isProfileAdded: false
         };
     }

    addValuesView(){
        return(
            <div>
                Name : <input type="text" value={this.props.profiles.name} ref={el => (this.nameInputRef = el)}/> 
                Account Number : <input type="text" value={this.props.profiles.account_number} ref={el => (this.accountInputRef = el)}/>
                <button onClick={() => {
                        this.setState(isProfileAdded=true),
                        this.props.addProfile(this.nameInputRef.value,this.accountInputRef.value) 
                }

                }>Add</button>

            </div>
        );

    }

    profileAddedView(){
        return(
            <div>Profile added succesfully</div>
        )
    }

    view(){
        return !this.props.profiles.isProfileAdded ? this.addValuesView() : this.profileAddedView()
    }

    render(){
        console.log(this.state)
        return this.view()
    }

}

const mapStateToProps = (state) => {

    return { profiles : state.profiles }
}

const mapDispatchToProps = dispatch => ({
onAddProfile:  dispatch(addProfile())
});
export default connect(mapStateToProps, {addProfile}) (AddView);

App.js 

import React from 'react';
import AddView from './AddView';

const App = () =>{
    return (
        <div className="ui container">
            <AddView />

        </div>
    );
}

export default App;

1 Ответ

1 голос
/ 25 марта 2019

Метод this.setState должен получить объект: 

() => {
   this.setState({ isProfileAdded: true});
   this.props.addProfile(this.nameInputRef.value, this.accountInputRef.value); 
}
...