Reac全局管理redux

Redux使用

1. npm i redux react-redux -S

import { createStore } from 'redux'; //创建仓库的原生方式
import { Provider } from 'react-redux'; //辅助插件，管理整个应用
import { reducer } from './redux/NumReducer.js';  //自己创建的，用于改变数据
let store=createStore(reducer);
ReactDOM.render(<Provide store={store}>   //通过辅助管理+自己的store=app的数据
	<App />
</Provide>,documentById('root'));

NumReducer.js文件：

export function reducer(state, action){
	//根据action指令完成不同操作
	switch(action.type){
	  case 'ADD_NUM':   //redux不建议改变原来的对象，而是根据原来的数据返回一个新的对象，返回给store一个新的数据
	  	return Object.assign({}, state, {num: state.num+1});
	  defalut:
	  	return { num: 1 };     //赋予默认值
	}
}

Redux对组件进行连接:

import React, { Comonent } from 'react';
import { connect } from 'react-redux';
class App extends React.Component{
	render(){
		addNum(){
	  	  this.props.dispatch({type: 'ADD_NUM'});
		}
		return(
			<React.Fragment>
				{this.props.num}
				<button onClick={e=>this.addNum}>增加</button>
			</React.Fragment>
		);
	}
}
export default connect(getProps)(App);
function mapStateToProps(state){
	return { 
	  userinfo: state.userinfo 
	};
}