实战build-react（四）一个模块的进化过程

主框架结构

home/index.js //模块主文件

创建Topic模块

阶段一基础代码

import React, { Component } from 'react';

import { TopicWrapper, TopicItem } from '../style';

class Topic extends Component {

    render() {

        return (

            <TopicWrapper>

              <TopicItem>

                 <img className='topic-pic' src="//upload.jianshu.io/users/upload_avatars/3950651/acfaa0ce-42fe-424a-b7c8-9a0136fb96ec.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"/>

              </TopicItem>

            </TopicWrapper>

        )

    }

}

export default Topic;

sotre编写

编写store/index.js文件

import reducer from './reducer';

export { reducer };

编写store/reducer.js

import { fromJS } from 'immutable';

const defaultState = fromJS({

topicList: [{

id: 1,

title: '社会热点',

imgUrl: "//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"

}, {

id: 1,

title: '社会热点',

imgUrl: "//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"

}

});

export default (state = defaultState, action) => {

switch (action.type) {

default:

return state;

}

阶段二 Home和Topic数据连接

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { TopicWrapper, TopicItem } from '../style';

class Topic extends Component {

render() {

const {list} =this.props;

return (

{list.map((item)=>( <TopicItem key={item.get('id')}>

<img

className='topic-pic'

src={item.get('imgUrl')}

alt=''

<div className='topic-title'>{item.get('title')}</div>

</TopicItem>))}

</TopicWrapper>

)

}

// getIn是自带函数

const mapState = (state) => ({

list: state.getIn(['home', 'topicList'])

});

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

编写假数据

数据异步动态话，在store/actionCreators.js文件里写请求数据方法

import axios from 'axios';

import * as constants from './constants';

// import { fromJS } from 'immutable';

const changHomeData = (result) => ({

type: constants.CHANGE_HOME_DATA,

topicList: result.topicList

});

// const addHomeList = (list, nextPage) => ({

// type: constants.ADD_ARTICLE_LIST,

// list: fromJS(list),

// nextPage

// })

export const getHomeInfo = () => {

return (dispatch) => {

axios.get('/api/home.json').then((res) => {

const result = res.data.data;

dispatch(changHomeData(result));

});

}

修改store/index.js文件

import reducer from './reducer';

import * as actionCreators from './actionCreators';

import * as constants from './constants';

export { reducer, actionCreators, constants };

在home主文件index.js里调用函数

如果写完数据没有更新那就是忘记修改store/reducer.js

import { fromJS } from 'immutable';

import * as constants from './constants';

const defaultState = fromJS({

  topicList: [],

});

const changeHomeData = (state, action) => {

  // 更新state数据，当同时修改多个参数时用merge

    return state.merge({

        topicList: fromJS(action.topicList)

    });

};

export default (state = defaultState, action) => {

  switch (action.type) {

    case constants.CHANGE_HOME_DATA:

            return changeHomeData(state, action);

    default:

      return state;

  }

}

注：在连通store时，数据链式流

mapState连接好的前提下

actionCreators（action,constants.CHANGE_HOME_DATA）-->store/reducer（action,constants.CHANGE_HOME_DATA）-->store/index-->actionCreators(dispatch)

注：在异步更新数据时，ajax获取数据后，在reducer.js中也要fromJS一下数据

巴特西

实战build-react（四）一个模块的进化过程

最新文章

热门文章