纪录一下react-redux的用法

最近学习react,结果碰到了redux这个玩意，琢磨琢磨勉勉强强会用了。

纪录一下，以免以后忘了。

首先是项目的根目录

index.js

//引入redux文件
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './redux/reducer';
//创建数据流的'仓库'
const store = createStore(reducer)
//项目的根代码类
class Root extends React.Component {
render() {
return ((
//通过仓库向组件传输数据
<Provider store={store}>
<Router >
<div>
<Route path='/login' component={Login}/>
<Route path='/register'<
4000
/span> component={Reg}/>
</div>
</Router>
</Provider>
))
}
}

接下来以往注册reister组件传输数据为例，进行redux的操作

创建一个总仓库 reduce.js 功能很简单就是把多个分散的redux合并起来

import {combineReducers} from 'redux';
import {user} from './user.redux'
import {login} from './login.redux'
//合并了user和login这样在单独的组件中用state就可以区分不同的仓库文件
export default combineReducers({user,login})

创建注册用的仓库 register.redux.js

import axios from 'axios';
//设置初始值
const initState = {
isAuth: '',
msg: '',
user: '',
pwd: '',
type: ''
}

//控制函数,把变更的函数返回给相应的模块，这里的作用是注册
export function user(state = initState, action) {
switch (action.type) {
case 'success':
return {
...state,
msg: '',
isAuth: true,
...action.payload
};
case 'err':
return {
...state,
msg: action.msg,
isAuth: false
};
default:
return state;
}

}
//如果错误执行的函数向控制函数传入的actio.type
function errMsg(msg) {
return {type: 'err', msg}
}
//如果正确执行的函数
function reqSucess(data) {
return {type: 'success', payload: data}
}
//在注册组件中运行的函数
export function register({user, pwd, repwd, type}) {
if (!user || !pwd) {
return errMsg('请输入用户名和密码')
}
if (pwd != repwd) {
return errMsg('密码不一致')
}
//异步请求
return dispatch => {
axios
.post('/users/reg', {user, pwd, type})
.then((res) => {
if (res.status == 200 && res.data.code == 0) {
dispatch（reqSucess({user, pwd, type})）
} else {
dispatch（errMsg('连接错误')）
}
})
}

}

项目的注册组件register.js

mport { connect } from 'react-redux'
import {register} from '../../redux/user.redux'
//通过装饰器将仓库的数据直接放进组件中
@connect(
state=>state.user,
{register}
)
//当执行注册时
class.........
constructor(props) {
super(props)
this.state={
user:'',
pwd:'',
repwd:'',
type:'genius'
}
}
register(){
this.props.register(this.state)
}

如此就完成了一个最简单的redux控制

要得到redux数据时需要在页面中引入数它（注意：不触发switch就返回默认的参数了），平常的开发中会遇到这样一种情况，有多个页面都需要redux数据如果每一个页面都执行一次显然就不够优雅。可以在index.js页面这样定义一个总控组件

class Root extends React.Component {
render() {
return ((
<Provider store={store}>
<Router >
<div>
//总控组件
<AuthRoute></AuthRoute>
<Switch>
<Route path='/geniusinfo' component={GeniusInfo}/>
<Route path='/bossinfo' component={BossInfo}/>
<Route path='/login' component={Login}/>
<Route path='/register' component={Reg}/>
<Route component={Dashboard}/>
</Switch>
</div>
</Router>
</Provider>
))
}
}

而在AuthRoute组件中就很简单咯。

import React, { Component } from 'react';
import axios from 'axios';
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux'

import {loadData} from '../redux/user.redux'
//把它路由化，这样在走路由的时候会执行里面的方法
@withRouter
//redux里面的方法，返回取得的值
@connect(
null,
{loadData}
)
class AuthRoute extends React.Component{

componentWillMount() {
axios.get('users/info').then((res)=>{
if (res.status==200) {
if(res.data.code==0){
this.props.loadData(res.data)
}else{
this.props.history.push('/login')
}
}
})
}
render(){
return null
}

}