本 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 準(zhǔn)備工作
store文件
- src 文件夾下創(chuàng)建 store 文件，store 下分別創(chuàng)建 index.js立宜，和 reducer.js文件
- store 文件夾下可創(chuàng)建多個(gè)文件夾纺酸，作為單獨(dú)存儲某些頁面的數(shù)據(jù)艾扮。
-
index.js文件內(nèi)容：
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 文件內(nèi)容
import { combineReducers } from 'redux'
import home from './home'
export default combineReducers({
home,
})
-###### home文件內(nèi)容
文件目錄：
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
以上內(nèi)容可不分開寫风钻，本人習(xí)慣分開寫活喊，所以此次 demo 分開寫了云头。
saga 文件
- src 文件夾下創(chuàng)建 saga文件夾捐友，文件夾創(chuàng)建 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 文件夾下創(chuàng)建 api文件夾，文件夾創(chuàng)建 index.js文件,處理異步請求
-
index.js：
import axios from 'axios'
export const api = {
getUserList() {
return axios.get('/xiaoyi/add')
},
}
二.引入頁面
- store 引入頁面溃槐，頁面可使用 store 內(nèi)數(shù)據(jù)
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'));
- 在頁面中使用數(shù)據(jù)：
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);
三.總結(jié)
redux-saga在項(xiàng)目中的使用流程圖：
image.png
這樣你就可以在你的項(xiàng)目中使用redux-saga,redux,react-redux了匣砖。
