react获取全局_react全局变量使用react-redux
在src目录下创建四个js文件分别为 index.js, action.js, reducers.js, state.js
分别用来创建store仓库，异步请求，真正用到的数据集合，默认数据设置
需要用到的工具有
Npm install redux -s
状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux
Npm install react-redux -s
React插件，作用：方便在React项目中使用Redux
Npm install react-thunk -s
中间件，作用：支持异步action
目录：
image.png
reducers.js:
// 它就是将来真正要用到的数据，我们将其统一放置在reducers.js文件
import {combineReducers} from 'redux'
import defaultState from './state.js'
function pageTitle (state = defaultState.pageTitle,action) {
// 不同的action有不同的处理逻辑
switch (action.type) {
case 'SET_PAGE_TITLE':
return action.data
default:
return state
}
}
function user (state = defaultState.user, action){
switch (action.type) {
case 'SET_USER':
return action.data
default:
return state
}
}
export default combineReducers({
pageTitle,
user
})
action.js:
// 现在我们已经创建了reducer，但是还没有对应的action来操作它们，所以接下来就来编写action
import axios from 'axios'
import qs from 'qs'
import { Modal} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
const alert = Modal.alert;
// 常量修改
export function setPageTitle (data) {
return (dispatch) => {
dispatch({ type: 'SET_PAGE_TITLE', data: data })
}
}
// 异步修改
// 用户登录，将用户信息存储在仓库
export function setUser (userName,password){
return (dispatch) => {
axios.post('http://xx.xx.xx.xx:8888/user-server/login/userLogin',qs.stringify({
userName:userName,
password:password
})).then(res => {
if(res.data.apistatus === 200){
dispatch({ type: 'SET_USER', data:res.data.result })
}else {
alert('提示',res.data.msg , [
{ text: '知道了', onPress: () => '' },
])
}
})
}
}
index.js:
// index.js
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from 'redux'
// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action 对象；但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和 getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
import thunk from 'redux-thunk'
// 引入reducer
import reducers from './reducers.js'
// 创建store实例
let store = createStore(
reducers,
applyMiddleware(thunk)
)
export default store
state.js:
export default {
pageTitle:"首页",
user:[]
}
前面都是准备工作，实际使用如下：
让store作用全部组件：
在app.js入口文件中：
import { Provider } from 'react-redux'
import store from './store/index'
render() {
return (
)
}
然后再组件中使用：
import React,{Component} from 'react';
import './login.css';
import '../public/alert.css'
import {Link} from 'react-router-dom'
import Input from '../public/input'
import { connect } from 'react-redux'
import { setUser } from '../../store/actions'
import { Redirect } from 'react-router';
class Login extends Component {
constructor(props){
super(props);
this.state = {
name:'手机号码/邮箱号码',
password:'登录密码',
name2:'',
password2:''
}
}
getname(name){
this.setState({
name2:name
})
}
getpass(pass){
this.setState({
password2:pass
})
}
submit(){
let { setUser } = this.props
let me = this;
setUser(me.state.name2,me.state.password2);
}
render(){
let { user } = this.props
if(user.acc_token){
return ();
}else {
return (
{user.acc_token}
LOGO
{this.submit(e)}}>登录
注册新账号
|
忘记登录密码
)
}
}
}
const mapStateToProps = (state) => {
return {
user: state.user,
}
}
// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
return {
setUser (data,data2) {
dispatch(setUser(data,data2))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)