react全局变量使用react-redux

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在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>

以上是 react全局变量使用react-redux 的全部内容， 来源链接： utcz.com/z/383011.html

回到顶部