saga.js
import {takeEvery, put} from 'redux-saga/effects'
import {GET_NAME_VALUE} from './actionTypes'
import axios from 'axios'
import {getName} from './actionCreators'
function* fetchGetName(action) {
console.log(action)
const res = yield axios.get('/test.json')
const name = res.data.name
yield put(getName(name))
}
function* mySaga() {
yield takeEvery(GET_NAME_VALUE, fetchGetName)
}
export default mySaga
組件
import React, { Component } from 'react'
import store from './store'
import { getName } from './store/actionCreators'
export default class App extends Component {
constructor(props) {
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<button onClick={() => this.handleGetName()}>SHOW NAME</button>
<p>{this.state.name}</p>
</div>
)
}
// 監聽store 重新更改頁面中的state
componentDidMount() {
store.subscribe(() => this.setState(store.getState()))
}
handleGetName() {
store.dispatch(getName())
}
}
可以在控制臺中或者redux tools中看到一直在呼叫這個action
請問這是為什么？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230855.html
標籤：JavaScript