Question

我的项目使用React-Redux Provider。

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))

从上面的代码中，根据我之前项目的经验，类别组件的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

我在这里缺少什么？

Answer 1

您需要使用connect组件react-redux上的Category功能，以便它access to dispatch。

export default connect()(Category)

此外，它可能只是简化为SO，但App不需要包含在withRouter中。只有在需要注入组件的路由器道具时才需要这样做。 Route会自动为其呈现的任何组件执行此操作，这就是您在Category上不需要它的原因。

export default connect(mapStateToProps)(App)

React-Redux提供程序无法正常工作

1 个答案: