一、安装redux 、redux-pack、redux-thunk
npm i redux redux-pack redux-thunk
参考网站：redux、redux-thunk、redux-pack
二、在src/config下新建store.ts文件写入
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk'; // 实现异步发送请求
import { middleware as reduxPackMiddleware } from 'redux-pack';
import rootReducer from '../reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware, reduxPackMiddleware)
);
export default store
三、新建src/actions文件夹
actions 文件夹下index.ts只负责统一导出
actions文件夹下新建user.ts写如如下代码
import { api } from '../config';
import { wrapServer } from '../config/axios'
export enum ACTION_TYPE {
LOGIN = 'LOGIN',
LOGOUT = 'LOGOUT'
}
export const login = (data: any) => {
return {
type: ACTION_TYPE.LOGIN,
promise: wrapServer({
method: 'post',
url: api.login,
data,
}),
};
};
export const logout = () => {
return {
type: ACTION_TYPE.LOGOUT,
promise: wrapServer({
method: 'post',
url: api.logout,
}),
};
};
export default {
ACTION_TYPE,
};
注：actions文件夹下不同文件负责不同模块下的请求，如果有新的模块可以在actions文件夹下新建相对应的文件，在同一模块下新增请求需要在ACTION_TYPE添加一个唯一type，导出一个新的请求。
四、新建src/reducers文件夹
新建index.tsx文件写入如下代码（每新增一个reducers文件下的文件需要在该文件内通过combineReducers合并）
import { combineReducers } from 'redux';
import { default as user } from './user';
export default combineReducers({
user,
})
新建user.ts文件写入如下代码(在这里可以对返回后的数值进行处理)
import { handle } from 'redux-pack';
import { User } from '../actions';
const { ACTION_TYPE } = User;
// 写入请求前默认数值
const initialState = {
user: {}
}
export default (state = initialState, action: any) => {
const { type, payload } = action;
switch (type) {
// 根据唯一type来匹配相应action
case ACTION_TYPE.LOGIN:
return handle(state, action, {
start: prevState => ({ ...prevState, loading: true}),
finish: prevState => ({ ...prevState, loading: false }),
failure: prevState => ({ ...prevState, user: state.user }),
success: prevState => ({ ...prevState, user: payload.data }),
});
default:
return state;
}
}
五、还需在src/App.tsx文件下引入Provider和store
修改src/App.tsx文件
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import Login from './pages/login';
import Layout from './layout';
import { Provider } from 'react-redux';
import store from './config/store';
import 'rsuite/dist/styles/rsuite-default.css';
import "./App.css";
const App = () => {
return (
<Provider store={store}>
<Router>
<Switch>
<Route exact path="/login"
component = {(props: any) => <Login { ...props } /> }
/>
<Route path="/"
component = {(props: any) => <Layout { ...props } /> }
/>
</Switch>
</Router>
</Provider>
);
};
export default App;
六、在页面发送请求接收数据
在src/pages/login修改index.tsx文件
引入connect
import { connect } from 'react-redux';
发送及从redux获取参数
const mapDispatchToProps = (dispatch: any) => ({
login: (value: any) => dispatch(login(value)),
});
const mapStateToProps = (user: any) => ({ user });
使用connect连接redux
export default connect(mapStateToProps, mapDispatchToProps)(Login);
页面完整代码
import React, { useState } from "react";
import { connect } from 'react-redux';
import {
Container,
Content,
FlexboxGrid,
Panel,
Form,
FormGroup,
ControlLabel,
FormControl,
ButtonToolbar,
Button,
Schema
} from "rsuite";
import {
login
} from '../../actions/user';
import { setToken } from '../../config/localStorage';
import './login.css';
const { StringType } = Schema.Types;
const mapDispatchToProps = (dispatch: any) => ({
login: (value: any) => dispatch(login(value)),
});
const mapStateToProps = (user: any) => ({ user });
interface Props {
history: any;
login: (value: any) => any;
user: any;
}
const Login = (props: Props) => {
const [formValue, setFormValue] = useState<any>({
name: '',
password: ''
});
const [form, setForm] = useState<any>(null);
// 自定义表单规则
const asyncCheckUsername = (name: any): any => {
console.log(name)
return new Promise(resolve => {
setTimeout(() => {
if (name === 'abc') {
resolve(false);
} else {
resolve(true);
}
}, 500);
});
}
// 验证表单规则
const model = Schema.Model({
name: StringType()
.isRequired('请填写用户名.')
.addRule((value, data) => {
return asyncCheckUsername(value);
}, '用户已注册'),
password: StringType()
.isRequired('请填写密码.')
});
// 提交
const handleSubmit = () => {
form.checkAsync().then((result: any) => {
if (!result.hasError) {
发送登录请求
props.login(formValue)
.then(
(res: any) => {
if (!res.error) {
// 当登录成功时时跳转到控制台首页
setToken(res.payload.data)
props.history.push('/')
}
}
)
}
});
}
return (
<div className="show-fake-browser login-page">
<Container>
<Content>
<FlexboxGrid justify="center">
<FlexboxGrid.Item colspan={12}>
<Panel header={<h3>登录</h3>} bordered>
<Form
ref={(ref: any) => (setForm(ref))}
fluid
onChange={formValue => {
setFormValue(formValue)
}}
onCheck={formError => {
}}
formValue={formValue}
model={model}
>
<FormGroup>
<ControlLabel>用户名</ControlLabel>
<FormControl name="name" />
</FormGroup>
<FormGroup>
<ControlLabel>密码</ControlLabel>
<FormControl name="password" type="password" />
</FormGroup>
<FormGroup>
<ButtonToolbar>
<Button appearance="primary" onClick={handleSubmit}>登录</Button>
{/* <Button appearance="link">Forgot password?</Button> */}
<span style={{paddingLeft: 20}}>用户名：admin 密码：123456</span>
</ButtonToolbar>
</FormGroup>
</Form>
</Panel>
</FlexboxGrid.Item>
</FlexboxGrid>
</Content>
{/* <Footer>xxx公司</Footer> */}
</Container>
</div>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
网友评论