redux-saga异步解决方案 - 图1

Actions/person.actions.js

export const load_person = () => ({ type:‘load_person’ })

Reducer/person.reducer.js

const initialState = { person: [] } function reducer(state = initialState, action) { switch (action.type) { case ‘load_person_success’: return { person:action.payLoad } default: return state } } export default reducer

Ruducer/index.js

import personReducerfrom‘./person.reducer’ import { combineReducers } from‘redux’ export default combineReducers({ personReducer:personReducer })

Saga/person.saga.js

import axios from‘axios’ import { takeEvery, put } from ‘redux-saga/effects’ //第一个是用来接收指令的，第二个相当于dispatch，用于主动往后触发一个指令 function* loadPerson() { let persons = yield axios.get(‘http://localhost:3005/api/getUsers‘).then(res=>res.data) yield put({ type:‘load_person_success’, payLoad:persons }) //向后传给store } export default function* personSaga() { yield takeEvery(‘load_person’, loadPerson) }

App.js

import React, { Component } from‘react’ import { connect } from‘react-redux’ import { bindActionCreators } from‘redux’ import * as personActionsfrom‘./store/Actions/person.actions’ /** */ class App extends Component { handler = () => { this.props.load_person() } render() { console.log(this.props) return ( <div> <button onClick={this.handler}>获取数据</button> </div> ) } } // 获取 store 中的数据 const mapStateToProps = (state) => ({ person:state.personReducer.person }) // 自动生成触发 actions 的函数 const mapActionsToProps = (dispatch) => { return { …bindActionCreators(personActions, dispatch) } } export default connect(mapStateToProps, mapActionsToProps)(App)

index.js

import Reactfrom‘react’; import ReactDOMfrom‘react-dom’; import Appfrom‘./App’ import { createStore, applyMiddleware } from‘redux’ import totalReducerfrom‘./store/Reducer’ import { Provider } from‘react-redux’ import createSagaMiddleware from‘redux-saga’ import personSaga from‘./store/Saga/person.saga’ const sagaMiddleware = createSagaMiddleware() const store = createStore(totalReducer, applyMiddleware(sagaMiddleware)) sagaMiddleware.run(personSaga) ReactDOM.render( <React.StrictMode> <Providerstore={store}><App/></Provider> </React.StrictMode>, document.getElementById(‘root’) );