当前位置: 首页 > 软件库 > Web应用开发 > >

simple-universal-react-redux

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 鲁华皓
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Simple Universal React Redux

The simplest possible Async Universal React & Redux boilerplate.

This repo is an attempt to make the simplest server-side rendered (universal) async React Redux app.

Boilerplates can be a great for two things:

  1. Get started with your application code quickly since you don't have to scaffold your app.
  2. Learn how apps can be scaffolded, and learn how technologies can fit together.

This repository is more aimed at the second point.

It was born out of frustrations with complex boilerplates where you can't understand what is going on behind the scenes. Developers tend to want to know how things work under the hood. This repo offers a boiled-down example to be tweaked and hacked around with.

It tries to be as un-opinionated and simple as possible.

It borrows heavily from the documentation of Redux and React-Router.

These are the technologies it uses:

For the app

Build tools

Commands

Install
yarn install
Develop
yarn run dev

Open localhost:3000

Build for production
yarn run build
Run in production
yarn run start

Open localhost:3000

Platform

This repo is developed and tested on Mac OS with node v10.10.0 and npm v6.7.0

Windows

This repo is tested on Windows. You might have to install nodemon globally though.

npm i -g nodemon

Documentation

Server side

Everything starts with the Express App.You can find this in src/server/index.js

Here we can see that all requests are routed to the handleRender function:

app.use(handleRender);

The handleRender function does a number of things:

  1. Create a new redux store on every request from the client
  2. Match the request path (req.path) to the react router routes specified in src/universal/routes
  3. Asynchronously fetch the data required to render this route (using the route's loadData function)
  4. Use react-dom/server renderToString function to create the required html
  5. Insert the html and redux preloadedState into a full html page using the renderFullPage function
  6. Send the response to the client res.send(

Client side

For the client side the index file is src/client/index.js

In this file, we use the redux preloadedState provided by the server to initialise a client side redux store.

We then use the React hydrate function to initialise React on the client side.

In the React components, any asynchronous data is fetched in componentDidMount. If data already exists, the component will not make the fetch.

componentDidMount() {
  // only fetch the data if there is no data
  if (!this.props.data) this.props.getData();
}

In this way, components won't make requests for data if the data has already been requested server side.

React Router

The difference in the react tree between server side and client side is as follows:

Server src/server/handleRender.js

<Provider store={store}>
  <StaticRouter location={req.url} context={{}}>
    <Router />
  </StaticRouter>
</Provider>

Client src/client/index.js

<Provider store={store}>
  <BrowserRouter>
    <Router />
  </BrowserRouter>
</Provider>

Everything else in the entire React tree is the same between server and client.

Contributing

Any issues, reports, feedback or bugs or pull requests are more than welcome.

However it is worth mentioning that the purpose of this repo is to create the simplest, most up-to-date, most robust universal async react redux boilerplate.

Therefore any pull request should aim to simplify, fix or update the current solution, not add new packages or complexity.

License

MIT License

Copyright (c) 2019 William Woodhead

Have a play around

Good luck with it!Please star or follow on twitter:@williamwoodhead

  • redux路由原理 by Michael Sargent 迈克尔·萨金特(Michael Sargent) Redux-First路由模型简介 (An Introduction to the Redux-First Routing Model) A routing library is a key component of any complex, single-page application.

  • 这里有字数限制,全文可以参考这里 Redux Ecosystem Links Introduction 本文是对redux-ecosystem-links的Fork与翻译。本文包含了一系列Redux的插件或者与之有紧密关联的项目的集合。本文包含了Redux官方文档中的 Ecosystem page 以及 Awesome-Redux 列表, 并且包含了很多笔者自己搜集的项目列表。列举在某个具体的目录

  • 入门书籍 https://github.com/react-guide/redux-tutorial-cn/blob/master/01_simple-action-creator.js 示例 Redux 源码 中同时包含了一些示例。你也可以使用在线编辑器 CodeSandbox 测试这些示例。 原生版 Counter 运行 Counter Vanilla 示例: git clone https:

  • react单元测试 by Benedek Gagyi 通过Benedek Gagyi 查看这些针对React的初学者友好的单元测试模式 (Check out these beginner-friendly unit testing patterns for React) There are many frameworks and even more ways to test a React com

  • ReactJS is a javascript library for building UIs. Although it's nowhere strictly defined, the idea with React is to follow the component-based ideology. Its declarative views make the code more predic

 相关资料
  • �� Universal React Simple universal React application with server side rendering. Built using latest version of React (v16), React Router (v5+), Redux (v7+), Express (v5+), Webpack (v4+), Babel Preset

  • Universal React Redux Boilerplate A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with: Server-side rendering with Express Code splitting with dynamic

  • Koa React Universal koa2、react、react-universal-component、koa-webpack-server、async/await、code-splitting、hot-module-replacement、react-router4、redux-thunk This project is dedicated to build simple yet po

  • Universal React Tutorial A tutorial on building universal web applications. The web application is built with: Node.js Express React ReactRouter Redux and ReactRedux Download $ git clone https://githu

  • React Redux Universal Boilerplate Introduction I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it mainly for fun. But it will be maintained and then I

  • React Native Universal Monorepo An opinonated approach to supporting multiple platforms with React Native using a Yarn Workspaces monorepo. Check out Running React Native everywhere for an in-depth gu