React-Redux(3)后篇react与redux相关库

第一部分:周边类库

1.format-json

一种JSON格式化的工具

2.ramda

对于JavaScript程序员的实用功能库,函数式库。官网地址:http://ramdajs.com/docs/

3.seamless-immutable

JavaScript的不可变的数据结构,这是正常的JS数组和对象向后兼容。扩展:redux-seamless-reducersredux-seamless-immutable

4.reduxsauce

用于创建createTypes,createActions,createReducer的方法。

5.redux-actions

让Flux的Action适用于Redux

6.redux-saga

用于管理Redux异步操作,中文档:redux-saga

7.apisauce

A JSON API client for JavaScript

8.redux-persist

persist and rehydrate redux stores,这是一个很好用的库,将store对象存储到本地,或者从本地拿出到内存。

9.redux-logger

记录redux日志

10.redux-thunk

Thunk middleware for Redux.

11.redux-devtools

Redux DevTools with hot reloading and time travel

12.redux-immutable

redux-immutable is used to create an equivalent function of Redux combineReducers that works withImmutable.js state.

13.react-immutable-render-mixin

import immutableRenderMixin from 'react-immutable-render-mixin';
React.createClass({
 mixins: [immutableRenderMixin],
 render: function() {
 return <div className={this.props.className}>foo</div>;
 }
});

14.react-router

A complete routing library for React

15.react-router-redux

Ruthlessly simple bindings to keep react-router and redux in sync

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import reducers from '<project-path>/reducers'
// Add the reducer to your store on the `routing` key 
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)
// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store)
ReactDOM.render(
  <Provider store={store}>
    { /* Tell the Router to use our enhanced history */ }
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('mount')
)

16.reactotron

监控ReactDOM和React Native应用。同类型的还有reactotron-reduxreactotron-react-native

第二部分:React-Redux阅读

1.性能优化篇

React组件性能优化
React高级性能优化
Redux性能优化
React-Redux性能优化

2.React解读篇
React设计模式:深入理解React&Redux原理套路
React源码剖析系列 - 不可思议的react diff
React源码剖析系列 - 生命周期的管理艺术
深入浅出React(一):React的设计哲学 - 简单之美
深入浅出React(二):React开发神器Webpack
深入浅出React(三):理解JSX和组件
深入浅出React(四):虚拟DOM Diff算法解析
深入浅出React(五):使用Flux搭建React应用程序架构

3.Redux解读篇
Redux 初见
Redux源码剖析
React-Redux源码剖析