3-2 使用redux 管理详情页面数据

上篇，完成了详情页面的布局。这里我们把详情页面的数据，放到redux 里管理。

和home 页面类似。我们在 src/pages/detail 下创建目录 store。在 store 下创建 index.js, reducer.js, actionCreators.js, actionTypes.js 。

我们把 detail 下的index中 标题 与 content 中的数据提取到reducer.js 中，如下是src/pages/detail/store 下的reducer 中的内容。

import { fromJS } from 'immutable';
import * as actionTypes from './actionTypes';

const defaultState = fromJS({
    title: '标题',
    content: '<img src="//upload-images.jianshu.io/upload_images/2257068-610cbe7de087b61c?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" /><p>说走就走的旅行，不是不管不顾不闻不问的去往某一个地方，而是今晚决定了，就妥善处理好工作，再做好攻略，明天一早就启程。</p><p>时间像是静止的，而流动的是人群。</p><p>草地成了孩子们的乐园，擒着心爱的玩具，小跑小闹，这个画面最欢喜。</p><p><b>当时距离有点远</b>，长焦段下拍的画面，画质不好，但依旧生动，依旧能感受到孩子的那种喜悦。</p>'
});

export default (state = defaultState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

下面是 index.js 中内容。

import React, {Component} from 'react';
import { DetailWrapper,
    Header,
    Content
 } from './style';

class Detail extends Component {
    render () {
        return (
            <DetailWrapper>
                <Header></Header>
                <Content>
                </Content>
            </DetailWrapper>
        )
    }
}

export default Detail;

然后，我们在总的reducer（src/store/reducer）中把这个子reducer合并，如下。

import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '../common/header/store';
import { reducer as homeReducer } from '../pages/home/store';
import { reducer as detailReducer } from '../pages/detail/store';

const reducer = combineReducers({
    header: headerReducer,
    home: homeReducer,
    detail: detailReducer
});

export default reducer;

然后 src/pages/detail 下的index 使用数据，如下

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { DetailWrapper,
    Header,
    Content
 } from './style';

class Detail extends Component {
    render () {
        const { title, content } = this.props;
        return (
            <DetailWrapper>
                <Header>
                    { title }
                </Header>
                <Content>
                    { content }
                </Content>
            </DetailWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        title: state.get("detail").get("title"),
        content: state.get("detail").get("content")
    }
}

export default connect(mapState, null)(Detail);

这时候会发现，页面有些问题。如下

我们的标签都被转义了，因此都被显示为字符串了。

当然，我们使用一个属性 dangerouslySetInnerHTML 解决这个问题。

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { DetailWrapper,
    Header,
    Content
 } from './style';

class Detail extends Component {
    render () {
        const { title, content } = this.props;
        return (
            <DetailWrapper>
                <Header>
                    { title }
                </Header>
                <Content dangerouslySetInnerHTML={{__html: content}}>
                </Content>
            </DetailWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        title: state.get("detail").get("title"),
        content: state.get("detail").get("content")
    }
}

export default connect(mapState, null)(Detail);