1.找到Actions下存放state的文件
rudex1.PNG
存放state
const initialState = {
isLogin:false,
username:''
};
export default initialState;
此时只存在login中但是所有页面都可以使用，但需要写入
function mapStateToProps(state) {
return {
me: state.me,
//这里使用login的redux
login: state.login,
};
}
2.创建所需要修改state的actions
rudux2.PNG
（1）.修改isLogin
- 第一个函数，需要传入修改的值 payload 来触发actions 进行下面的修改
- 第二个函数，触发reducer（相当于 vuex的mutation） 进行修改isLogin为actions传进来的值，和所有的state，不然只会拥有isLogin
import {
LOGIN_CHANGE_LOGIN_STATE,
} from './constants';
//这里需要传入修改的值 payload 来触发actions 进行下面的修改
export function changeLoginState(payload) {
return {
type: LOGIN_CHANGE_LOGIN_STATE,
payload
};
}
//这里触发reducer（相当于 vuex的mutation） 进行修改isLogin为actions传进来的值，和所有的state，不然只会拥有isLogin
export function reducer(state, action) {
switch (action.type) {
case LOGIN_CHANGE_LOGIN_STATE:
return {
...state,
isLogin:action.payload
};
default:
return state;
}
}
修改username
import {
LOGIN_CHANGE_USERNAME,
} from './constants';
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;
}
}
3.在页面上配置
（1）第一个函数，将state存放到props中
（2）第二个函数，派发actions存放到props中
/* 将state存放到props中*/
function mapStateToProps(state) {
return {
login: state.login,
};
}
/*派发actions存放到props中*/
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(DefaultPage);
4.调用this.props里的actions函数,修改state
//修改isLogin的值为true
this.props.actions.changeLoginState(true)
//修改username 值为数据里的值
this.props.actions.changeUsername(res.user.username)
如果需要用到其他页面的actions的话，需要导入进页面进行使用actions
import * as loginAction from '../login/redux/actions'
添加到actions的派发props中就可以使用了
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions,...loginAction }, dispatch)
};
}
如果子组件需要用到redux需要将所有props传进所需的子组件
例：这样就有了父组件的props
render() {
console.log(this.props)
return (
<div className="me-default-page">
<Header {...this.props}/>
<Order {...this.props} logout={this.logout}/>
<Footer pageName="me" />
</div>
);
}
