React:redux+router4搭建应用骨架

短期内关于react的对后一篇笔记。假设读者对redux和router4有基本了解。

缘由:

现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即:

|--components

|--reducers

|--actionTypes

|--actions

|--else

这样的目录形式。这种形式的一个好处是:store中的状态一开始就是完整的,在按需加载的时候不需要特意更新root reducer和全局state树,只加载对应的视图即可。

但是,笔者在学习《深入浅出react+redux》的时候,作者提出的文件组织形式是以组件为单元组织app的文件结构,即:

|--ComponentA

  |--action

  |--reducer

  |--View

  |--index.js

|--ComponentB

  |--action

  |--reducer

  |--...

此时app的store和root reducer在一开始只有公共部分,按需加载某个组件后,再对redux store和root reducer进行更新扩充。

这种情况下,最关键的问题是:如何在每次按需加载后更新reducer和store。实践上分为两个阶段:

1.异步加载组件。组件的reducer、view、state字段作为对外暴露的接口。

2.加载完成后获取其reducer和state字段更新root reducer & redux store。

《深入浅出》中作者给的方法是:

1.用webpack的require.ensure分片组件,实现异步加载。

2.借助store enhancer拓展一个store.reset方法,将新组件的reducer和state字段传进去,完成更新。

然而现在要使用router4,怎么解决上面问题呢?

我目前的方案是:

1.异步加载使用Bundle组件(下面会给出其代码)。

2.刷新store和root reducer仍然使用《深入浅出》作者给出的reset方法。

----------------------------------------------------------分割-----------------------------------------------

我们现在已经会使用redux管理app状态。将state提取到全局store,并经由disptach方法派发action给root reducer 生成新的store state,而组件本身以观察者监听state变化。

router4遵循组件即路由的思想,url匹配时由Route标签渲染我们的组件。所以本质上<Route>也是视图。与Redux毫无冲突。

它们一个限制了我们app的数据流,一个控制我们视图的跳转。

由于react-redux提供的Provider组件必须放到应用的最顶层以实现全局访问store,所以项目的最基本骨架是:

|--Provider
    |--App
        |--Router
            |--RouteA
                |--RouteA child
            |--RouteB
  //...

在Router4中,我们往往用到的是Bundle组件来异步加载组件,我对它进行一些改写,以适应“按组件组织文件”的方式:

 1 import React from ‘react‘;
 2 import PropTypes from ‘prop-types‘;
 3 import {
 4   combineReducers
 5 } from ‘redux‘;
 6 import store from ‘./Store.js‘;
 7 class Bundle extends React.Component {
 8      constructor(props) {
 9         super(props);
10         this.state = {
11             mod: null
12         };
13         this.page=null;
14     }
15   componentWillMount() {
16     // 加载初始状态
17     this.load(this.props);
18   }
19
20   componentWillReceiveProps(nextProps) {
21     if (nextProps.load !== this.props.load) {
22       this.load(nextProps);
23     }
24   }
25
26   load(props) {
27     // 重置状态
28     this.setState({
29       mod: null
30     });
31     // 传入组件的组件
32     props.load().then((mod) => {
33       //...
34       this.page=mod.Page;
35       let {Page,stateKey,reducer,initialState} = mod;
36       let state=store.getState();
37
38       store.reset(combineReducers({...store._reducers,[stateKey]:reducer}),{...state,[stateKey]:initialState});
39
40       this.setState({
41         // handle both es imports and cjs
42         mod: mod.Page.default ? mod.Page.default : mod
43       });
44     });
45   }
46
47   render() {
48     // if state mode not undefined,The container will render children
49     return this.state.mod ? this.props.children(this.page) : ‘加载中,请稍候...‘;
50   }
51 }
52
53 Bundle.propTypes = {
54   load: PropTypes.func,
55   children: PropTypes.func
56 };
57
58 export default Bundle;

一个最基本的项目用到的依赖:

react:

提供了React、Component 帮助我们搭建视图层。

redux:

combineReducers帮我们生成Root Reducer

createStore帮我们创建全局的store管理app状态。

applyMiddleware 让我们调用中间件,增强dispatch方法

compose帮我们组装store enhancer

react-redux:

Provider:让我们可以全局访问store

connect:生成容器组件和store通信

router4:

Router、Route、Link等实现项目页面路由

Bundle组件:

配合Router4实现按需加载(用到import语法)

工具明确了之后,我们开始构建应用。

0.创建项目目录:全局的store.js、index.js、enhancer文件夹、组件文件夹等

1.设计state树

2.创建各个组件,写它的actionType、actionCreator、reducer,View、stateKey,在组件文件夹下index.js中引入,并将actionCreator、reducer、stateKey等导出。

3.将公共部分的reducer引入root reducer文件中

4.实现store,引入enhancer/reset.js,让其具备reset方法,以便按需加载时刷新reducer和状态。

5.在index.js 和 App.js中搭建顶层结构,组织各个组件,设计各个页面的路由。

//...

测试。

build。

时间: 2024-10-07 14:11:38

React:redux+router4搭建应用骨架的相关文章

webpack+react+redux+es6

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

webpack+react+redux+es6开发模式

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.) 余博伦· 2 个月前 原文链接:A Study Plan To Cure JavaScript Fatigue 作者:Sacha Greif 和大家一样,最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016. 显然这篇文章击中了人们的痛处.它在Hacker News上排了不止一次第一.同样也是/r/javascript上最火的一篇,在Med

react + redux 完整的项目,同时写一下个人感悟

先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目,往往需要其他库和工具的配合,比如用redux来管理数据,react-router管理路由,react已经全面拥抱es6,所以es6也得掌握,webpack就算是不会配置也

React &amp; Redux 的一些基本知识点

一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createClass import React from 'react';       const Contacts = React.createClass({             render() {                return (                    <div><

React+Redux实现追书神器网页版

引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读,聚合资源的开源项目.但是由于正好在学习开源的Android小说阅读器--任阅,加上api比较全,开始边学边做,项目地址在这里,如果有好的意见欢迎提issue或pr. 效果图 目录结构 ├─actions #redux的action,业务逻辑 ├─components #页面容器 │ └─common

react redux 深入剖析--干货

## 技术栈: react + redux + webpack + react-router + ES6/7/8 + immutable ## 运行项目(nodejs 6.0+) ``` git clone https://github.com/bailicangdu/react-pxq.git cd react-pxq npm i 或者运行 yarn(推荐) npm start npm run build (发布)``` ## 说明 > 本项目主要用于理解 react 和 redux 的编译方

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

写了两篇文章,对于初学react+redux的人来说,很有好处

虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那我们就来拆解,一步一步实现,试想我们开发程序也是一个一个功能区域实现,那么我们第一步就是先把整体结构构思出来,然后先把头部做出来,这样看是不是简单很多! 将持续更新react+redux 链接1:http://www.cnblogs.com/heigehe/articles/6237362.html