如果你采用 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