使用 react/redux 从 OnClick Table 行构建过滤器函数

Question

所以这就是我正在尝试做的事情：我有一个包含三个名字的列表，当我点击其中一个时，剩下的两个消失了。我最后的 objective 是构建一个 table，这样我就可以通过单击该行来过滤我的数据。我现在真的不知道从哪里开始。我猜我的 OnClick 函数应该在我的 redux 存储状态之一上触发一些过滤方法。但我不知道我应该如何用我的动作和减速器来表达这一点。所以我现在至少有两个问题：

我的过滤函数应该是什么？
这个过滤器函数如何与我的 action/dispatch 和减速器一起工作？

我不是要代码或完整的解决方案，我更多的是寻找整体逻辑。如果需要说明，这里是我的代码的某些部分：

我的组件：

class NameList extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                            var props = this.props.name;
                        return (
                  <div>
                                <ul>
                  { props.map((m, i) =>
                    <li key={i} onClick={???}>{m.name}</li>
                  )}
                </ul>
                </div>
                        )
                      };
                     }

        const mapStateToProps = (state) => {
            return {
                name: state.nameData.allname,
            };
        };

我的减速器：

var items = [
  { name: 'Louise', age: 27, color: 'red' },
  { name: 'Margaret', age: 15, color: 'blue'},
  { name: 'Lisa', age:34, color: 'yellow'}
];

  const nameData = (state = {
    allname: items
    }, action) => {
    switch (action.type) {
      case 'SET_NAME':
        return {
          ...state,
          name: action.name
        };
          default:
            return state;
                }
              };

我的行动：

export function AuthorFilter() {
    return {
      type: 'SET_NAME',
      name,
        };
      }

谢谢。

Answer 1

一种方法是使用 mapDispatchToProps。然后从您的组件中您将能够发送合适的操作。

如果您想详细了解所有这些东西是如何连接的（商店、动作创建者等），您可以查看这篇文章：https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md

使用 react/redux 从 OnClick Table 行构建过滤器函数

Building a Filter function from OnClick Table row with react/redux

reactjs

react-redux