Провайдер React-Redux не работает

Вопрос:

В моем проекте используется поставщик React-Redux.

ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));

а также

class App extends Component {

componentDidMount(){

API.getCategories().then((categories)=>{
this.props.dispatch(addCategories(categories))
})

API.getAllPosts().then(posts => {
console.log('getAllPosts', posts)
})
}

render() {
return (
<div className="App">
<Route exact path="/" render={()=>{
return (
<div>
{
this.props.categories.map((category)=>{
return (
<Link key={category.name} to={'/category/${category.name}'} params={{category: category.name}} >{category.name}</Link>
)
})
}
</div>
)
}}
/>

<Route path="/category/:category" component={Category} />

</div>
);
}
}



function mapStateToProps(x) {

return {
categories: x.categories
}
}

// export default App;

export default withRouter(connect(
mapStateToProps,
)(App))

Из приведенного выше кода и исходя из моего опыта из предыдущего проекта компонент Category this.props должен иметь метод dispatch которым я могу вызвать действия, но по какой-то причине его нет.

Это мой компонент категории:

class Category extends Component {
componentDidMount(){
console.log('this.props of Category', this.props)

var category = this.props.match.params.category

API.getPosts(category).then((posts)=>{
console.log('after getPosts', posts)
this.props.dispatch(addAllPosts(posts))
})
}

render(){
return <p>Category</p>
}
}

export default Category

Что мне здесь не хватает???

Лучший ответ:

Вам нужно использовать функцию connect from react-redux для компонента Category чтобы он имел доступ к dispatch.

export default connect()(Category)

Кроме того, это может быть просто упрощено для SO, но App не нужно обертывать с помощью withRouter. Это необходимо только в том случае, если вам нужен роутер-реквизит, введенный в компонент. Route делает это автоматически для любого компонента, который он отображает, поэтому он не нужен в Category.

export default connect(mapStateToProps)(App)

Оцените статью
TechArks.Ru
Добавить комментарий