【配置】react redux配置

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>
    );
  }

使用的话都通过props中获取