📜  redux saga fetch api - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:03:17.028000             🧑  作者: Mango

代码示例1
//EXAMPLE FETCH DATA API REDUX SAGA

// USER ACTION CREATOR
export const REQUEST_API_DATA = 'REQUEST_API_DATA'
export const RECEIVE_API_DATA = 'RECEIVE_API_DATA'

export const requestApiData = () => ({ type: REQUEST_API_DATA })

// USER REDUCER
import { REQUEST_API_DATA, RECEIVE_API_DATA } from '../actions/user'

export default (state = {}, { type, payload }) => {
  switch (type) {
    case RECEIVE_API_DATA:
      return payload.users
    default:
      return state
  }
}

// USER SAGA
import axios from 'axios'
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import { REQUEST_API_DATA, RECEIVE_API_DATA } from './actions/user'

function* userReceiveAll(action) {
  try {
    const { data } = yield call(axios.get, 'https://jsonplaceholder.typicode.com/users')
    yield put({ type: RECEIVE_API_DATA, payload: { users: data } })
  } catch (e) {
    console.log(e.message)
  }
}
export default function* userSendAll() {
  yield takeLatest(REQUEST_API_DATA, getApiData)
}

// REDUX STORE
import { createStore, applyMiddleware, combineReducer } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { all } from 'redux-saga/effects'
import logger from 'redux-logger'
import userReducer from './reducers/user'
import userSaga from './sagas/user'

function* saga() {
  yield all([userSaga()]) 
}

export const store = () => {
 const sagaMiddleware = createSagaMiddleware()
 const store = createStore(combineReducer({users: userReducer}), 
 applyMiddleware(sagaMiddleware, logger)) 
 sagaMiddleware.run(saga)
 return store;
}

// USER COMPONENT
import React from 'react'
import { connect } from 'react-redux'
import { requestApiData } from './actions'

class User extends React.Component {
  componentDidMount() {
    this.props.fetchAll()
  }
  render() {
    const { users } = this.props.state
    const results = users.length > 0 ? users : []
    return (
      
{results.map((v) => (
  • {v.username}
))}
) } } const mapStateToProps = (state) => ({ state }) const mapDispatchToProps = (dispatch) => ({ fetchAll: () => dispatch(requestApiData()) }) export default connect(mapStateToProps, mapDispatchToProps)(User)