Redux存储的状态已更改,但mapStateToProps无法正常工作

时间:2018-10-25 01:13:37

标签: reactjs redux react-redux redux-thunk

我检查了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)

enter image description here enter image description here

  1. 通过检查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}}的过程进行了,不是吗?

    < / li>
  2. 即使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却没有变化?

enter image description here

(图像的结果来自 AlarmContentList.js 上的redux store

0 个答案:

没有答案