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)