react全局变量使用react-redux

2021-01-23 21:36:10 阅读：249 来源： 互联网

标签：全局变量 return dispatch js react state action import 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 (
      <div>
        <Provider store = {store}>

         </Provider>
      </div>
      )
  }

然后再组件中使用：

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 (<Redirect to="/"/>);
        }else {
            return (
                <div id='login'>
                <p>{user.acc_token}</p>
                    <h1>LOGO</h1>
                    <div>
                        <Input msg={this.state.name} gethandle={this.getname.bind(this)}/>
                        <Input msg={this.state.password} gethandle={this.getpass.bind(this)}/>
                        <button onClick={(e) => {this.submit(e)}}>登录</button>
                    </div>
                    <p>
                        <Link to='/Register'>注册新账号</Link>
                        <span> | </span>
                        <Link to=''>忘记登录密码</Link>
                    </p>
                </div>
            )
        }
    }
}

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)

作者：嘤夏影
链接：https://www.jianshu.com/p/e73d7122e78e
来源：简书

标签：全局变量,return,dispatch,js,react,state,action,import,redux
来源： https://www.cnblogs.com/xred/p/14319062.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react全局变量使用react-redux