react-redux的使用

首先安装 redux组件 在控制台使用 yarn add redux 和 yarn add react-redux
然后建立store与reducer

store

import {createStore} from 'redux';
import reducer from './reducer'

const store = createStore(reducer);

export default store;

reducer

const defaultState = {
    focused: false
};//存储数据

export default (state = defaultState,action) =>{
    if (action.type === 'search_focus'){
        return {
            focused:true
        }
    }
    if (action.type === 'search_blur'){
        return {
            focused:false
        }
    }
    return state;
}//根据不同的action进行操作

然后需要在组件当中进行引用

import React, { Component } from "react";
import Header from './common/header/index.js';
import store from './store/index';//对store进行引用
import { Provider } from 'react-redux';//这个组件可以将store内的数据提供给其他的组件

class App extends Component {
  render(){
  return (
    <Provider store={store}>//将store中的数据提供给包裹的组件
      <Header/>
    </Provider>
  );
  }
}

export default App;

然后在想进行数据修改的组件当中引入import { connect } from 'react-redux';
使用connect方法可以让组件与store建立起连接

在导出的时候使用connect方法生成一个新组件

export default connect(mapStateToProps,mapDispathToProps)(Header);//前两个为映射参数，最后为组件名

即可让组件与store建立起连接

然后在组件当中使用两个映射方法

const mapStateToProps = (state)=>{
    return {
        focused:state.focused
    }
}//store中的数据如何映射到组件当中，state为store内的所有数据

const mapDispathToProps = (dispatch) =>{
    return {
        handleInputFocus(){
            const action = {
                type: 'search_focus'
            };
            dispatch(action);
        },
        handleInputBlur(){
            const action = {
                type: 'search_blur'
            };
            dispatch(action);
        }
    }
}//组件调用dispatch方法对store内的数据进行改写，即调用dispatch对store发送action
//然后store再发送到reducer中，reducer按照写好的方法对数据进行改写后又发回store，然后store的数据改写
//后又对页面进行渲染。

最后附上一张工作流程图