實戰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一下數據