如何在不将组件连接到 redux 存储的情况下从组件调用操作？

Question

我有一个Cards 组件，它从UserPosts 组件（连接到商店）中获取道具并显示卡片。 Cards 未连接到 redux 存储，我想在 handleDelete 函数中调度一个操作。我该怎么做？

import React, { Component } from "react"

class Cards extends Component {

  handleDelete = (id) => {

  }

  render() {
    const { title, description } = this.props.post
    const { postId } = this.props.post._id 
    return (
      <div className="card">
        <div className="card-content">
          <div className="media">
            <div className="media-left">
              <figure className="image is-48x48">
                <img
                  src="https://bulma.io/images/placeholders/96x96.png"
                  alt="Placeholder image"
                />
              </figure>
            </div>
            <div className="media-content" style={{border: "1px grey"}}>
              <p className="title is-5">{title}</p>
              <p className="content">{description}</p>
              <button className="button is-success">Edit</button>
              <button onClick={this.handleDelete(postId)} className="button is-success">Delete</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Cards

UserPosts 传递 props 的组件

      <div>
        {userPosts &&
          userPosts.map(post => {
            return <Cards key={post._id} post={post} />
          })}
      </div>
    ```

Answer 1

可以使用全局存储，直接调用dispatch方法。不建议。难以维护和调试。

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])
// Dont create new one, use the one created in root

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))