主框架结构

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

实战build-react(四)一个模块的进化过程的更多相关文章

  1. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  2. 手把手和你一起实现一个Web框架实战——EzWeb框架(四)[Go语言笔记]Go项目实战

    手把手和你一起实现一个Web框架实战--EzWeb框架(四)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 这一篇文章主要实现路由组功能.实现路由 ...

  3. AspNetCore-MVC实战系列(四)之结尾

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...

  4. 【Android开发VR实战】三.开发一个寻宝类VR游戏TreasureHunt

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53939303 本文出自[DylanAndroid的博客] [Android开发 ...

  5. Python--Redis实战:第四章:数据安全与性能保障:第7节:非事务型流水线

    之前章节首次介绍multi和exec的时候讨论过它们的”事务“性质:被multi和exec包裹的命令在执行时不会被其他客户端打扰.而使用事务的其中一个好处就是底层的客户端会通过使用流水线来提高事务执行 ...

  6. 用react编写一个hello world

    我要分享的是用react搭建一个简单的hello world, 一个小demo, 大神请略过 首先看一下目录结构 创建一个目录, 用于存放demo mkdir reactHello cd reactH ...

  7. Maven实战(三)——多模块项目的POM重构

    在本专栏的上一篇文章POM重构之增还是删中.我们讨论了一些简单有用的POM重构技巧,包含重构的前提--持续集成,以及怎样通过加入或者删除内容来提高POM的可读性和构建的稳定性.但在实际的项目中,这些技 ...

  8. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  9. SAS数据挖掘实战篇【四】

    SAS数据挖掘实战篇[四] 今天主要是介绍一下SAS的聚类案例,希望大家都动手做一遍,很多问题只有在亲自动手的过程中才会有发现有收获有心得. 1 聚类分析介绍 1.1 基本概念 聚类就是一种寻找数据之 ...

随机推荐

  1. tensorflow keras导包混用

    tensoboard 导入:导入包注意 否者会报错 :keras FailedPreconditionError: Attempting to use uninitialized value trai ...

  2. es5实现数组去重

    var a = [1, 2, 4, 4, 3, 3, 1, 5, 3] console.log(a.filter((item, index, arr) => { return arr.index ...

  3. spring boot-8.静态资源映射

    1.webjars WebJars是将客户端(浏览器)资源(javascript,Css等)打成jar包文件,以对资源进行统一依赖管理.WebJars的jar包部署在Maven中央仓库上.官网地址:h ...

  4. Mycat+Mysql主从复制实现双机热备

    Mycat+Mysql主从复制实现双机热备 一.mysql主从配置原理 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据 ...

  5. webpack的介绍

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAGpCAIAAACbBiUBAAAgAElEQVR4Aey9CVwb553/L04JcSPuw5

  6. 20 亿的 URL 集合,如何快速判断其中一个?

    假设遇到这样一个问题:一个网站有 20 亿 url 存在一个黑名单中,这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中?并且需在给定内存空间(比如:500M ...

  7. Java 读取Json文件内容

    读取json文件为String类型: import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logge ...

  8. windows 通过cmd命令行管理防火墙

    (1)恢复初始防火墙设置 netsh advfirewall reset(2)关闭防火墙 netsh advfirewall set allprofiles state off(3)启用桌面防火墙 n ...

  9. Mysql 表空间和 数据页空洞

    一.表空间1.表空间: innodb 引擎存储的最高层: 存放所有的数据2.独立表空间:Mysql 版本 5.6 后默认开启的单表单空间(1)Innodb 默认存储引擎页的大小为 16K :默认表空间 ...

  10. Python Set intersection() 方法

    描述 intersection() 方法用于返回两个或更多集合中都包含的元素,即交集. 语法 intersection() 方法语法: set.intersection(set1, set2 ... ...