react-redux學習(四)

react-redux

• 安裝 yarn add react-redux
• <Provider/>組件的使用

import React, { Component } from 'react';
import Header from './common/header/index';
import { Provider } from 'react-redux';
import store from './store'

class App extends Component {
  render() {
    return (
      <Provider store = {store}>
        <Header></Header>
      </Provider>
    );
  }
};
export default App;

• 組件中如何獲取及使用store，獲取用mapStateToProps，使用的話把state換成props

import { connect } from "react-redux";
const mapStateToProps = (state) => {
    return {
        focuse:state.focuse,
        list:state.list
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        changeFocuse () {
            store.dispatch(changeFocuse())
        },
        changeBlue () {
            store.dispatch(changeBlur())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header) ;