react组件如何获取store的state和执行dispatch?

Question

AppSider里点击标签，AppContent组件获取当前标签然后请求列表，现在不知道怎么把组件和store联系起来

//action
export const setTag = tag => ({
  type: 'SET_TAG',
  tag
})

//reducer
const tagReducer = (state = { tag: '' }, action) => {
  switch (action.type) {
    case 'SET_TAG':
      return{...state,tag:action.tag}
    default: return state
  }
}

App.js

    <Provider store={store}>
        <Layout>
          <AppHeader />
          <Content>
            <Layout className="app-container">
              <AppSider />
              <AppContent />
            </Layout>
          </Content>
        </Layout>
      </Provider>

AppSider

class AppSider extends React.Component {
  state = {
    tags: []
  }
  getTags() {
    http('repos/codcoe/codcoe/labels').then(res => {
      this.setState({ tags: res })
    })
  }
  render() {
    const { tags } = this.state
    return (
      <Sider className="app-sider bg-fff" width={240}>
        <Collapse bordered={false} defaultActiveKey={['tags']}>
          <Panel header="博文标签" key="tags">
            {tags.map((tag, index) => (
              <Tag
                color="orange"
                key={index}
                onClick={() => {
                  // 这里设置当前标签
                }}
              >
                {tag.name}
              </Tag>
            ))}
          </Panel>
        </Collapse>
      </Sider>
    )
  }
}

AppContent

class AppContent extends React.Component {
  //如何获取选中的标签？
  render() {
    return <Content className="app-content bg-fff">Content</Content>
  }
}

Answer 1

成功了，不知道这样对不对

const mapStateToProps = state => {
  return { tag: state.tagReducer.tag }
}
const mapDispatchProps = dispatch => {
  return {
    setTag: tag => {
      dispatch(setTag(tag))
    }
  }
}
export default connect(
  mapStateToProps,
  mapDispatchProps
)(AppSider)

Answer 2

大概瞄了一眼，对的。