本 demo 主要使用的是 redux, react-redux, redux-saga
- npm install packageName -S
- 接上一篇文章，目前使用的 package 包如下：
"antd": "^3.12.4",
"axios": "^0.18.0",
"customize-cra": "^0.2.12",
"json-server": "^0.14.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.3",
"react-scripts": "3.0.0",
"redux-saga": "^1.0.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"babel-plugin-import": "^1.11.0",
"redux-devtools-extension": "^2.13.5"
一. redux , react-redux , redux-saga 准备工作
store文件
- src 文件夹下创建 store 文件，store 下分别创建 index.js，和 reducer.js文件
- store 文件夹下可创建多个文件夹，作为单独存储某些页面的数据。
-
index.js文件内容：
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas'
import reducer from './reducer'
const sagaMiddleware = createSagaMiddleware();
const middleWares = [sagaMiddleware];
const store = createStore(
reducer,
composeWithDevTools(
applyMiddleware(...middleWares)
)
)
sagaMiddleware.run(rootSaga);
export default store
-
reducer.js 文件内容
import { combineReducers } from 'redux'
import home from './home'
export default combineReducers({
home,
})
-###### home文件内容
文件目录：
image.png
actionTppes.js:
export const GET_LIST_ASYNC = 'GET_LIST_ASYNC'
actionCreators.js:
import * as types from './actionTypes'
export default {
getListInfo () {
return {
type: types.GET_LIST_ASYNC
}
}
}
defaultState.js:
export default {
list: []
}
index.js:
import default_state from './defaultState'
const reducer = (
previous_state = default_state,
action
) => {
let new_state = Object.assign({}, previous_state)
switch (action.type) {
case 'GET_LIST_ASYNC_SUCCESS':
new_state.list = action.payload.data.data; break;
default:return previous_state;
}
return new_state
}
export default reducer
以上内容可不分开写，本人习惯分开写，所以此次 demo 分开写了。
saga 文件
- src 文件夹下创建 saga文件夹，文件夹创建 index.js文件
-###### index.js：
import { take, put, call, fork, select, takeEvery, all } from 'redux-saga/effects'
import *as homeAction from '../store/home/actionTypes'
import {api} from '../api'
export function* getUserList() {
const userList = yield call(api.getUserList)
yield put({
type: 'GET_LIST_ASYNC_SUCCESS',
payload: {list:userList},
});
}
export function* watchGetUserList() {
yield takeEvery(homeAction.GET_LIST_ASYNC, getUserList)
}
export default function* root() {
yield all([fork(watchGetUserList)])
}
api 文件
- src 文件夹下创建 api文件夹，文件夹创建 index.js文件,处理异步请求
-
index.js：
import axios from 'axios'
export const api = {
getUserList() {
return axios.get('/xiaoyi/add')
},
}
二.引入页面
- store 引入页面，页面可使用 store 内数据
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import App from './App';
import store from "@store";
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
- 在页面中使用数据：
import React from 'react';
import { connect } from "react-redux";
import homeActions from '../store/home/actionCreators'
import { Button } from 'antd'
class Container extends React.Component {
render(){
return (
<div><Button onClick={()=>{
this.props.dispatch(homeActions.getListInfo())
}}>get list</Button></div>
);
}
}
function mapStateToProps(state) {
return {
list: state.home.list,
};
}
export default connect(mapStateToProps)(Container);
三.总结
redux-saga在项目中的使用流程图：
image.png
这样你就可以在你的项目中使用redux-saga,redux,react-redux了。
