Question

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

我的过滤功能应该是什么？
此过滤器功能如何与我的操作/调度和减速器一起使用？

我没有要求代码或完整的解决方案，我更多地寻找整体逻辑。以下是我的代码的一些部分，如果需要说明：

我的组件：

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

1 个答案: