Redux
2019-04-23 本文已影响0人
雨泽丶
redux
- state:存放变量
- action:派发任务
- reduce:储存修改变量的方法
- react里redux是对应每个组件都有一个redux文件
- actions 里的initialState文件夹里
//命名的默认的需求变量
const initialState = {
isLogin:false,
username:""
};
- initialState 创建调用方法
例:
- 创建改变islogin的方法 changeLoginState
- 创建改变username的方法 changeUsername
import {
LOGIN_CHANGE_USERNAME,
} from './constants';
//payload调用的(islogin,username)
export function changeUsername(payload) {
return {
type: LOGIN_CHANGE_USERNAME,
//调用的方法
payload
};
}
export function reducer(state, action) {
switch (action.type) {
case LOGIN_CHANGE_USERNAME:
return {
...state,
username:action.payload
};
default:
return state;
}
}
- 页面网页调用actions的方法和全局调用的方法
//调用本页面的actions
import * as actions from './redux/actions';
//调用其他页面actions方法
import * as loginActions(自己的命名) from '../login/redux/actions'(actions的位置文件夹地址);
//调用
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions , ...loginActions}, dispatch)
};
}
- 调用改变方法
//改变
this.props.actions.changeLoginState(false);