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 ( <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
来源：简书