How does the react component get the state of store and execute dispatch?

Click on the tag in

AppSider, and the AppContent component gets the current tag and then requests a list. Now I don"t know how to associate the component with 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>
  }
}
Jun.29,2022

probably glanced at it, yes.


succeeded. I don't know if this is right for

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