react-redux基础使用之connect

react- redux官方使用文档

1: 配置文件npm install eject
2:安装依赖

npm install --save-dev babel-plugin-transform-decorators-legacy 

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

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

4：遇到问题：Support for the experimental syntax 'decorators-legacy' isn't currently enabled
解决：

示例：新建一个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}
}

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

import { login } from "./redux";
@connect( state=>state.auth, { login } )

参考文章：
阮一峰：Redux 入门教程（一）：基本用法
阮一峰：Redux 入门教程（二）：中间件与异步操作
阮一峰：Redux 入门教程（三）：React-Redux 的用法