Создание функции фильтра из строки таблицы OnClick с помощью реакции/сокращения

Question

Так вот что я пытаюсь сделать: у меня есть список из трех имен, и когда я нажимаю на один из них, остальные два исчезают. Моя конечная цель - создать таблицу, чтобы я мог фильтровать свои данные, щелкая по строке. Я не знаю, с чего начать. Я предполагаю, что моя функция OnClick должна запускать некоторый метод фильтрации в одном из состояний хранилища. Но я не знаю, как мне сформулировать это с помощью моего действия и редуктора. поэтому у меня есть как минимум два вопроса:

• Какова должна быть функция моего фильтра?
• Как эта функция фильтра работает с моим действием/диспетчером и редуктором?

Я не прошу ввести код или законченное решение, я больше ищу общую логику. Вот некоторые части моего кода, если это необходимо для иллюстрации:

Мой компонент:

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