Redux是一个全局状态管理设计思想的实现。
我这里说似一个全家状态设计思想的实现,是因为Redux本身可以用在任何js的项目中。并非是React。
Redux 有 store action reducer 三个概念。
store 不多解释,可以理解为一个Object。里面记录全局的state。store对象内部属性的值,是通过action来修改。
而每一个action,可以理解为一个项目中的一个动作(或者说每一个action,是需要修改一个或多个store里面的state)。每一个action必须包含一个type。
reducer 字面的意思不说了,它是一个存函数。但是这个函数有2个作用。
第一个作用,初始化store 对象的数据。
export function login (state = {loginName: '',loginPass:''}, action){
switch(action.type){
case Login.LOGIN:
return {...action.login};
break;
default: return state;//无论如何都必须有这个返回
}
}
上图中函数是一个reducer,state有个默认值。当stroe被创建的时候需要传入reducer,这时候store里面就会被初始化loginName和loginPass这两个state。
第二个作用就是处理action发送过来的请求,然后将新的state返回给store。
//这不是一个完整代码,发上来就是本人词穷,写这个比自己说的好。
import { createStore} from 'redux';
import { Provider, connect } from 'react-redux';
import Login from './pages/Login';
import reducer from './reducers/index';
const store = createStore(reducer);//创建全局store
<Provider store={store}>//全局使用store
<Login />//会将store里面的对象,传入Login里面
</Provider>
每一个action 该方法都会执行一次,初始化也会被执行,这里的数据都会传入this.props
const mapStateToProps = (state, ownProps)=>{
console.log(JSON.stringify(state));
return {
value: state.login.loginName,
language: state.systemSet.switch_language,
name: state.systemSet.login_text,
pass: state.systemSet.login_pass
}
}
//所有的事件,displaych直接理解分发
const mapDispatchToProps = (dispatch, ownProps)=>{
return {
//此处可以发送请求到服务器 获取服务器数据
onIncreaseClick: (name, pass)=> dispatch(loginAction.login(name, pass)),
switchLanguage: ()=> dispatch(SystemAction.switch_language())
}
}
//将一个普通的React Component 使用高阶组件和函数的方式与store链接在一起
export default connect(mapStateToProps, mapDispatchToProps)(Login);