`Provider`

Provider组件可以让被包裹组件的子组件拿到state数据，子组件可以从context拿到store

import { Provider } from 'react-redux'

function App() {
  return (
    <Provider store={store}>
      <App></>
    </Provider>
  );
}

`connect`

connect接受两个参数：mapStateToProps和mapDispatchToProps。mapStateToProps将state映射到组件的参数（props），mapDispatchToProps将用户操作映射为action

import { connect } from 'react-redux';

const Home = (props) => {
    xxx
}
const mapStateToProps = () => {
  console.log(state);
  return {state}
}
const mapDispatchToProps = {
  add(value){
    return {
      type:'increment',
      data:value*1
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Home)

案例：state中isCollepsed控制菜单栏折叠

新建store和reducer

store.js

import { legacy_createStore as createStore,combineReducers } from "redux";
import { CollapsedReducer } from "./reducers/CollapseReducer"; 
import {Addreducer} from '../views/sandbox/home/reducer'

const reducer = combineReducers({
    CollapsedReducer,
    Addreducer
})
const store = createStore(reducer);

export default store

CollapsedReducer.js

export const CollapsedReducer = (pre={isCollepsed:false},action) => {
    let {type} = action
    switch (type) {
        case 'change_collapsed':
            let newstate = {...pre}
            newstate.isCollepsed = !newstate.isCollepsed
            return newstate
    
        default:
            return pre;
    }
}

为最外层组件包裹Provider

import IndexRouter from "./router";
import { Provider } from 'react-redux'
import store from './redux/store' //折叠store

function App() {
  return (
    <Provider store={store}>
      <IndexRouter></IndexRouter>
    </Provider>
  );
}

export default App;

connect 定义映射关系传参

import { connect } from 'react-redux';

const mapStateToProps = ({CollapsedReducer:{isCollepsed}}) => {
  console.log(isCollepsed);
  return {
    // isCollepsed
    isCollepsed
  }
}
const mapDispatchToProps = {
  changeCollepsed(){
    return {
      type:'change_collapsed'
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(TopHeader)

props获取数据或传递action

const TopHeader = (props) => {
  // const [collapsed] = useState(false);
  const changeCollepsed = () => {
      //调用changeCollepsed()传递action
    props.changeCollepsed()
  }
  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
        //获取数据
      {props.isCollepsed? <MenuUnfoldOutlined onClick={changeCollepsed}/> : <MenuFoldOutlined onClick={changeCollepsed}/>}
    </Header>
  )
}

react-redux Provider和connect的使用

Provider

connect