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