首先安装 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的数据改写
//后又对页面进行渲染。
最后附上一张工作流程图