纪录一下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' 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
    }

}