我检查了state
的{{1}}是否已更改,但是redux store
无法正常工作。
这是我的文件树和代码。我想要的是,当我通过mapStateToProps
从REST API获得data
时,便将axios
分发到data
并更新了{{1 }}。之后,我终于得到redux-store
的{{1}},就像state
redux-store
MainPage.js
state
PageHeader.js
redux-store
AlarmContentList.js
this.props.data
index.js
index.js
MainPage.js
- PageHeader.js
- AlarmContentList.js
AlarmContent.js(redux-store)
import React, {Component} from 'react'
import {connect, Provider} from 'react-redux'
import store from '../../store'
import ReactDOM from 'react-dom'
import axios from 'axios'
import * as AlarmContentActions from '../../store/modules/AlarmContent'
import PageHeader from './PageHeader'
class MainPage extends Component {
constructor(props) {
super(props)
axios.get("http://127.0.0.1:8000/api/main")
.then(res => {
this.setState({
AnswerPostMultiList: res.data,
})
}
)
.catch(err => {
console.log(err)
})
}
state = {
AnswerPostMultiList : [
],
}
render() {
this.props._getInBox(this.state.AnswerPostMultiList)
return(
<>
<PageHeader />
</>
)
}
}
MainPage.defaultProps = {
}
const mapDispatchToProps = (dispatch) => ({
_getInBox: (inBoxList) => {
dispatch(AlarmContentActions.inBox(inBoxList))
}
})
export default connect(null, mapDispatchToProps)(MainPage)
通过检查import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './PageHeader.css'
import AlarmContentList from './AlarmContent/AlarmConentList'
class PageHeader extends Component {
render() {
return (
<>
<AlarmContentList />
</>
)
}
}
export default PageHeader
,我派遣import React, {Component} from 'react'
import {connect} from 'react-redux'
class AlarmContentList extends Component {
render() {
console.log(this.props, 'this.props')
return (
<>
<div>{this.props.inBox}<div>
</>
)
}
}
AlarmContentList.defaultProps = {
inBox: []
}
const mapStateToProps = (state) => ({
inBox : state.inBox
})
export default connect(mapStateToProps)(AlarmContentList);
并更改import React, {Component} from 'react'
import {connect, Provider} from 'react-redux'
import store from '../../store'
import ReactDOM from 'react-dom'
import MainPage from './MainPage'
ReactDOM.render(
<Provider store={store}>
<MainPage />
</Provider>, document.getElementById('main-page'))
的{{1}}的过程进行了,不是吗?
即使import {createAction, handleActions} from 'redux-actions'
//define action types
const INBOX = 'AlarmContent/INBOX';
//CREATE action
export const inBox = createAction(INBOX);
// SET initialState
const initialState = {
inBox:[
]
}
// CREATE reducers
export default handleActions({
[INBOX] : (state, action) => {
return {
...state,
inBox : action.payload
}
},
}, initialState)
中的redux-dev-tool
已更新,但为什么data
中的state
却没有变化?
(图像的结果来自 AlarmContentList.js 上的redux store
)