Actions/person.actions.js

import axios from ‘axios’ // export const getPersons = (payLoad) => ({ type: ‘getPersons’, payLoad }) export const getPersons = () =>async (dispatch) => { let persons = await axios.get(‘http://localhost:3005/api/getUsers‘).then(response=>response.data) dispatch({ type:‘loadPersonSuccess’, payLoad:persons }) }

Reducer/person.reducer.js

const initialState = { person: [ { id:‘001’, name:‘syy’, age:20, sex:‘男’ } ] } function reducer(state = initialState, action) { switch (action.type) { case ‘loadPersonSuccess’: return { person: [ …state.person, …action.payLoad ] } default: return state } } export default reducer

Reducer/index.js

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

App.js

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

index.js

import React from‘react’; import ReactDOM from‘react-dom’; import App from‘./App’ import { createStore, applyMiddleware } from‘redux’ import totalReducer from‘./store/Reducer’ import { Provider } from‘react-redux’ import thunk from ‘redux-thunk’ const store = createStore(totalReducer, applyMiddleware(thunk)) ReactDOM.render( <React.StrictMode> <Provider store={store}><App/></Provider> </React.StrictMode>, document.getElementById(‘root’) );