Как удалить конкретный элемент из массива в магазине приставок

Question

Я плохо знаком с редуксом и реагирую. Все еще делаю простые уроки. Мне удалось создать 2 простых компонента; один выводит на экран (в виде списка) все, что находится в массиве в хранилище с избыточностью, а другой компонент содержит кнопку и текстовое поле, которое в основном добавляет этот массив в хранилище.

Я хотел бы добавить функцию, которая позволит мне удалять конкретную запись в списке в зависимости от того, на что нажал пользователь. Я имею в виду создание <button> рядом с каждым тегом <li>, который будет отображаться при циклическом перемещении по массиву, и эти кнопки будут соответствовать соответствующим элементам списка. Но я не уверен, как это сделать.

Я пытался создать кнопку при создании каждого тега <li>, но на консоли я получал сообщение о том, что каждому элементу в списке нужен уникальный идентификатор. Затем я решил создать в моем магазине еще один массив с именем buttons, который будет содержать уникальный идентификатор, а также идентификатор списка, но он вышел из-под контроля. Я думаю, что я мог бы усложнить это. Вот что у меня на данный момент:

Компоненты: List.jsx (отвечает за вывод списка)

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

const ListComp = ({ lists }) => (
    <div>    
        <ul>
            {console.log(lists)}
            {lists.map( element => (
                    <li key={element.id}>
                        {element.titleToBeAddedToList}
                    </li>
            ))}
        </ul>
    </div>
)

const mapStateToProps = state => {
    return {
        lists: state.lists
    };
}
const List = connect(mapStateToProps)(ListComp)

export default List;

SubmitButton.jsx (отвечает за вывод кнопки и текстового поля)

import React from 'react'
import { connect } from "react-redux";
import uuidv1 from "uuid";
import { addList } from "../actions/index";
import { addButton } from "../actions/index"

function mapDispatchToProps(dispatch){
    return {
        addlist: article => dispatch(addList(article)),
        addbutton: idOfButton => dispatch(addButton(idOfButton))
      };
}

class Submit extends React.Component{

    constructor(){
        super();
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);        
    }

    handleChange(event) {
        this.setState({ [event.target.id]: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();
        const {titleToBeAddedToList} = this.state;
        const id = uuidv1();
        const button_id = uuidv1();
        //Dispatching the action:
        this.props.addlist({ titleToBeAddedToList, id });
        this.props.addbutton({id, button_id});        
        //Once we've dispatched an action, we want to clear the state:
        this.setState({ titleToBeAddedToList: "" });
    }

    render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label htmlFor="title">Title</label>
              <input
                type="text"
                className="form-control"
                id="titleToBeAddedToList"
                onChange={this.handleChange}
              />
            </div>
            <button type="submit" className="btn btn-success btn-lg">
              SAVE
            </button>
          </form>
        );
      }
}

const SubmitButton = connect(null, mapDispatchToProps)(Submit)

export default SubmitButton;

Переходники:

const initialState = {
lists: [],
buttons: []
};

function rootReducer (state = initialState, action) {
    if(action.type === "ADD_LIST" ){
        return Object.assign({}, state, {
            lists: state.lists.concat(action.payload)
          });
    } else if(action.type === "ADD_BUTTON"){
        return Object.assign({}, state, {
            buttons: state.lists.concat(action.payload)
          });
    } else if(action.type === "DELETE_FROM_LIST"){
        //.....//
    }
    return state;
}

export default rootReducer;

Действие:

    export function addList(payload) {
    return { type: "ADD_LIST", payload }
};

export function addButton(payload){
  return {type: "ADD_BUTTON", payload }
}

export function deleteList(payload){
  return { type: "DELETE_FROM_LIST", payload }
}

Магазин:

import { createStore } from "redux";
import rootReducer from "../reducers/index";

const store = createStore(rootReducer);

export default store;

Answer 1

Вы можете использовать Math.random () в качестве уникального идентификатора ключа, если кнопка нажата, она вызовет действие deleteItem с идентификатором, действие привязано к передаче редуктора по идентификатору, затем вы можете использовать идентификатор для определить элементы и удалить их из списка.

import React from 'react'
import { connect } from "react-redux";
import { deleteItem } from './actions';

const ListComp = ({ lists }) => (
   <div>    
       <ul>
          {console.log(lists)}
          {lists.map( element => (
             <li key={Math.random()} key={element.id}>
                 {element.titleToBeAddedToList}
                  <button onClick={() => deleteItem(element.id)}>X</button>
              </li>
                ))}
       </ul>
    </div>
)

const mapStateToProps = state => {
   return {
      lists: state.lists
    };
}
const List = connect(mapStateToProps, {deleteItem})(ListComp) // Make it available to component as props

export default List;



Action:

export function deleteElement(id) {
  return function(dispatch) {
    return dispatch({type: "DELETE_FROM_LIST", payload: id})
  }
}



Reducer:

 case 'DELETE_FROM_LIST': {
  const id = action.payload;
  return {
    ...state,
    list: state.list.filter(item => item.id !== id)
  }
}

Answer 2

Это минимальный работающий пример реагирования с редуксом, содержащий все фрагменты для удаления элемента из массива в хранилище с избыточностью.

// reducer.js
const reducer = (state, action) => {
  switch (action.type) {
    case 'DELETE': 
    return state.filter(item => (
      item.id !== action.payload.id
    ))
    default: return state;
  }
}

// Item.js

const Item = ({id, onClick, label}) => (
  <li>
    {label} 
    <button onClick={ () => onClick(id) }>
      delete
    </button>
  </li>
)


// ListContainer.js

const mapStateToProps = state => ({ items: state })

const ListContainer = ReactRedux.connect(mapStateToProps)(class extends React.Component {

  handleDelete = id => {
    const { dispatch } = this.props;
    dispatch({ type: 'DELETE', payload: { id } })  
  }


  render() {
    const { items } = this.props;
  
    return items.map(({id, label}) => (
      <Item
        label={label}
        id={id}
        onClick={this.handleDelete}
      />
    ))
  }
})

// Main.js

const initialState = [
  { id: 1, label: 'item 1' },
  { id: 2, label: 'item 2' },
  { id: 3, label: 'item 3' },
  { id: 4, label: 'item 4' }
]

const store = Redux.createStore(reducer, initialState);

class App extends React.Component {
  render(){
    return (
    <ReactRedux.Provider store={store}>
      <ListContainer />
    </ReactRedux.Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.1/react-redux.js"></script>
<div id="root"></div>

Answer 3

else if (action.type === "DELETE_FROM_LIST") {
  return Object.assign({}, state, {
    buttons: state.lists.filter(item => (item.id !==action.payload))
  });
}

вы можете использовать filter() для удаления.