Проблема с отправкой действия внутри компонентов

Question

Я пытаюсь dispatch выполнить действие в одном из моих компонентов. Я установил своего создателя действия и reducer. Моего создателя действий зовут allSearches. Я даже отправляю действие внутри компонента. Тем не менее, я получаю следующий результат, когда я console.log из allSearches - (исходя из mapStateToProps). Пожалуйста, смотрите ниже.

return dispatch (actionCreator.apply (this, arguments));- (видно на консоли)

import React from 'react'
import { connect } from 'react-redux'
import {fetchTopSearches} from '../actions/fetchTopSearches.js'
import {allSearches} from '../actions/allSearches.js'
import { Link, Route, HashRouter } from "react-router-dom";
import Search from './Searches'

class TopSearches extends React.Component {

  componentDidMount(){
    this.props.fetchTopSearches();
    this.props.allSearches();
  }

  render() {
    return(
      <div className="topsearches">
       <table border="2" align="center">
         <thead>
           <th> Search Term </th>
           <th>Count </th>
         </thead>
         <tbody>
           {this.props.topSearches.map(top_search =>
             Object.keys(top_search).map(key => {
               return (
                 <tr>
                   <td>{key}</td>
                   <td>{top_search[key]}</td>
                 </tr>
               );
             })
           )}
         </tbody>
       </table>
       <HashRouter>
           <p><Link to='/searches'> All Searches </Link></p>
             <Route exact path='/searches' render={()=><Search all_searches={this.props.allSearches}/>}/>
       </HashRouter>
     </div>
     )
   }
 }

const mapStateToProps = state => {
  return (
    {topSearches: state.topSearchReducer.topSearches,
     allSearches: state.allSearchesReducer.allSearches
    }
  )
}


export default connect(mapStateToProps, {fetchTopSearches, allSearches})(TopSearches);

Answer 1

Я полагаю, что ваша проблема заключается в том, что вы вызываете как функцию отправки, так и реквизиты allSearches.

Вместо

const mapStateToProps = state => {
  return (
    {
     topSearches: state.topSearchReducer.topSearches,
     allSearches: state.allSearchesReducer.allSearches
    }
  )
}

Попробуйте вызвать allSearches здесь что-то еще, например searches, например:

const mapStateToProps = state => {
  return {
     topSearches: state.topSearchReducer.topSearches,
     searches: state.allSearchesReducer.allSearches
  };
};

Я попытался воспроизвести вашу проблему здесьс некоторыми фиктивными данными из API тестирования:

В коде, если вы измените searches в компоненте TopSearches обратно на allSearches, вы увидите, что ничего не произойдет, потому что теперь есть функция отправки и реквизит с именем allSearches.

Чтобы избежать путаницы, нужно создать mapDispatchToProps, например:

const mapDispatchToProps = dispatch => {
  return (
    {
     allSearches: () => dispatch(allSearches())
    }
  )
}

Затем передается компонент старшего разряда connect, например:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TopSearches);

. Таким образом, вы сразу узнаете props, доступные в вашем компоненте, и если у вас есть реквизиты сто же имя.