react|纪录一下react-redux的用法 react|菜鸟

最近学习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 (( //通过仓库向组件传输数据 )) } }

接下来以往注册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 (( //总控组件 )) } }

【react|纪录一下react-redux的用法】而在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 }}