25.使用redux对详情页面进行数据管理

1.我们需要使用store进行数据管理，首先我们需要在detail目录下新建四个文件，actionCreatores,actionTypes,index,reducer
在这里插入图片描述
2.index.js文件中：引入actionCreators和actionTypes并且将其导出

import * as actionCreators from './actionCreators';
import * as actionTypes from './actionTypes';
export { actionCreators,actionTypes };

3.在redcuer中，我们定义一些数据

import { fromJS } from 'immutable';
import * as actionTypes from './actionTypes';
const defaultState = fromJS({
    title: '一树花开',
    content:<p>花色太过浓郁<br /><br />我惹了一身的花香<br /><br />是怪风多情<br /><br />还是我的途径</p><p>夏天的蝉<br /><br />吵醒了我的梦<br /><br />我以为冰激凌<br /><br />快化了<br /><br />谁知早就被猫<br /><br />吃了个精光</p>'
})
export default (state = defaultState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

4.然后我们需要在总的src目录下的reducer中，我们需要加入detail目录下的reducer
在这里插入图片描述 5.在detail目录下的index中，我们需要发送请求修改数据，并且接收store进行处理的数据

首先我们需要使用react-redux这个中间件

在这里插入图片描述

然后我们使用mapState这个方法接收从reducer中传递过来的数据
在我们的自定义标签中使用接收到的数据进行页面的渲染
这时候我们可以发现，在页面上，我们的content的内容没有被解析
index的完整代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { DetailWrapper,Header,Content} from './style';
class Detail extends Component{
    render() {
       
        return(
        <DetailWrapper>
                <Header>{this.props.title} <img className='img' src={require('./image/3.jpg')}/></Header>
                <Content dangerouslySetInnerHTML={{__html:this.props.content}}></Content>
        </DetailWrapper>
        )
    }
}
const mapState = (state) => ({
    title: state.getIn(['detail', 'title']),
    content:state.getIn(['detail','content'])
})
export default connect(mapState,null)(Detail);

25.使用redux对详情页面进行数据管理

猜你喜欢