Как правильно удалить сообщения в react-redux & hook?

Question

[Levingstoun]

Пытаюсь удалить сообщение, которое приходит в пропсах. Использую хуки и редакс. Почему-то метод splice удаляет не по одному сообщению, а все, которые я бы отправил.
Как сделать правильно?

const ProfilePost = (props) => {
  let [editMode, setEditMode] = useState(false);
  let [messages, setMessages] = useState([props.message]);
  let [post, setStatePost] = useState([props.posts]);

 useEffect(() => {
    setMessages(messages);
  }, [messages]);


  const activateEditMode = () => {
    setEditMode(true);
  };

  const deactivateEditMode = (messages) => {
    setEditMode(false);
    props.updateMessage(messages);
  };

  const onMessageChange = (e) => {
    setMessages(e.currentTarget.value);
  };
  

  const deleteMode = () => {
   props.deletePost()
  }

  return (
    <div>
    <div>
    {post.map((element, i) => (
      <div className={style.message} id={i}>
        {!editMode && (
         <div>
          <div>
            <span></span>
            </div>
     <div className={style.message_wrapper}>
        <div>
          <span className={style.field_message}>
            {props.message}
          </span>
          <div>
            <button onClick={activateEditMode}>
              edit message
            </button>
          </div>
              <div>
            <button className={style.button_delete} onClick={() => deleteMode()}>
              delete
            </button>
          </div>
        </div>
        </div>
       </div>
      )}

      {editMode && (
      	<div>
            <span></span>
          <TextareaAutosize
            className={style.field_edit}
            onChange={onMessageChange}
           value={props.message}
          />
          <div>
            <button onClick={deactivateEditMode}>
              save
            </button>
          </div>
        </div>
      )}
          </div>
          ))}
              </div>
    </div>
  )
}

let mapStateToProps = state => {
  return {
    newPostText: state.profilePage.newPostText,
    posts: state.profilePage.posts,
  };
};

let mapDispatchToProps = dispatch => {
  return {
    updateMessage: (message) => {
      let action = updateMessage(message);
      dispatch(action);
    },
    deletePost: () => {
      let action = deletePost();
      dispatch(action);
    },
  };
};

const ProfilePostEdit = connect(
  mapStateToProps,
  mapDispatchToProps
)(ProfilePost);

Кусок редьюсера

const DELETE_POST = 'DELETE_POST'

let initialState = {
  profile: null,
  posts: []
}
const profileReducer = (state = initialState, action) => {
  switch (action.type) {
  case DELETE_POST: {
      return { ...state, posts: state.posts.splice(0, 1)}
    }
}
export const deletePost = (key) => ({type: DELETE_POST, key})
};
}

Answer 1

[Павел Диденко]

Немного непонятно. Это весь код редьюсера? Если весь - то он у вас вообще пустой, вы пытаетесь вырезать элемент из пустого массива.

Comments

[Levingstoun]

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

Answer 2

[hzzzzl]

export const deletePost = (key) => ({type: DELETE_POST, key})

этот key это айдишник поста в массиве с постами? или где он используется?

switch (action.type) {
  case DELETE_POST: {
      // action.key = post_id  который надо удалить
      return { 
        ...state, 
        posts: state.posts.filter(post => post.key !== action.key)
      }
    }
}

ну и в шаблоне вызывать как
props.deletePost(айдиПоста)

Comments

[Levingstoun]

Я уже так пробывал и фильтром почему-то все так же удаляет все отправленные сообщения, вместо одного. В чем может быть причина?

[hzzzzl]

Levingstoun, предлагаю по консольлогать везде и посмотреть что куда приходит, и каким образом фильтруется, в любом случае удалять через .filter()

[Павел Диденко]

Levingstoun, чтобы не гадать на кофейной гуще - оформите код в песочнице, тогда проблема быстро разрешится