正式接触react应该有两个月了,项目开始也有一个月了,
开始新项目的时候就没有打算使用redux,因为感觉学习这个的成本挺高.
这两天,项目第一版已经出来了,昨天下午有时间就抓紧时间看看redux相关的东西,大致有个了解,然后今天就照葫芦画瓢,把一个模块给整理了下,换成了redux.
在这里记录下使用,以备后需.
react-redux
使用前得需要安装
npm i --save react-redux redux redux-thunk
- 先创建actions
获取用户列表的相关操作.
// src/actions/users/index.js
import * as usersTypes from '../../constants/users/ActionTypes';
export const queryUsersSuccess = users => ({ type: usersTypes.QUERY_USERS_SUCCESS, users })
export const queryUsers = () => {
return dispatch => {
MyFetch.get(`v1/users`).then(data => {
dispatch(queryUsersSuccess(data.users))
})
}
}
// MyFetch.js
import { message } from 'antd';
const API_URL = process.env.REACT_APP_DEV_API_URL
var Fetch = {
get(path) {
return new Promise((resolve, reject) => {
fetch(`${API_URL}/${path}`, {
headers: new Headers({
'token': localStorage.getItem("my-custom-token"),
'Accept': 'application/json',
'Content-Type': 'application/json',
})
}).then(res => {
return handleStatus(res);
})
.then(json => {
resolve(json);
})
.catch(err => {
reject(err);
});
});
},
post(params) {},
...
}
function handleStatus(res) {
let errors;
switch (res.status) {
case 200:
return res.json();
case 500:
console.log("500错误");
message.error('服务器内部错误', 5)
errors = `${res.status}, ${res.statusText}`
throw errors
case 404:
message.error("资源不存在", 5)
errors = `${res.status}, ${res.statusText}`
throw errors
case 401:
message.error("登录会话过期,请重新登录", 5)
localStorage.removeItem("my-custom-token")
window.location.href = '/login'
break;
case 403:
message.error("无权限访问", 5)
errors = `${res.status}, ${res.statusText}`
throw errors
default:
}
}
- 创建constants
// src/constants/users/ActionTypes.js
export const QUERY_USERS = 'QUERY_USERS'
export const QUERY_USERS_SUCCESS = "QUERY_USERS_SUCCESS"
- 创建 reducers相关
// src/reducers/users.js
import {QUERY_USERS_SUCCESS} from "../constants/users/ActionTypes";
const initState = {
users: []
}
export default function users(state = initState, action) {
console.log("Welcome to reducer users");
switch (action.type) {
case QUERY_USERS_SUCCESS:
return {
...state,
users: action.users
}
default:
return state
}
}
// src/reducers/index.js
import { combineReducers } from 'redux'
//BASE API
import users from './users'
const rootReducer = combineReducers({
users,
})
export default rootReducer
这里创建了相关的reducers.
- 在根组件store
// src/index.js
import React from 'react';
import { Provider } from 'react-redux'
import configureStore from './configureStore';
import ReactDOM from 'react-dom';
import App from './App';
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// src/configureStore.js
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
// let store = createStore(combineReducers);
export default function configureStore() {
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);
return store;
}
- connect
// src/components/User.js
import * as UserActions from '../../actions/users';
...
class User extends Component{
componentDidMount(){
this.props.actions.queryUsers();
}
}
const mapStateToProps = state => ({
company: state.companies,
users: state.users //这个是reducers定义的
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(UserActions, dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Company)
这样就可以使用啦.
本文原文
ps: 目前看来,这个方法很low. 在action写了请求接口的方法,觉得不是很规范,后需会改进.
