react-redux的使用采用@connect修饰器方法（简单demo）

如果你采用 react-create-app脚手架话，按以下流程操作

1. npm install eject  弹出配置文件

2. npm install babel-plugin-transform-decorators-regacy --save-dev

3. 在package.json文件中babel加上plugins配置
  

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-decorators-legacy"
    ]
  }

4.我们这里实现一个登陆验证功能

新建一个redux.js，写入如下代码

const LOGIN = 'LOGIN';
const LONOUT = 'LONOUT';
//reducer
export function auth(state={ isAuth:false,user:'***' }, action) {
    switch(action.type){
        case LOGIN:
            return { ...state,isAuth:true };
        case LONOUT:
            return { ...state,isAuth:false };
        default:
            return state
    }
}
//action creator
export function login() {
    return {type:LOGIN}
}
export function logout() {
    return {type:LONOUT}
}

5. 在我们组件中引入上边redux.js

import { login } from "./redux";

@connect( state=>state.auth, { login } )

然后在我们的组件中就可以通过this.props.login(),this.props.logout(),操作改变isAuth的值，进而判断是否可以进入登陆之后才能查看的页面；

 

完整demo下载

https://github.com/zhanglongjiZLJ/react-redux-admin