实战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 (

      <TopicWrapper>

{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一下数据