OnClick 테이블 행의 필터 함수를 react/redux로 작성하십시오.

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