Skip to content

实现动态加载 reducer,简化 reducer 的代码分块

License

Notifications You must be signed in to change notification settings

omodule/lazy-reducer

Repository files navigation

lazy-reducer

Build Status npm version

为什么使用 lazy-reducer ?

在使用了 redux 的项目,普遍存在同样的问题:随着项目规模的增长, reducer 数量和代码量也相应增加。本身 redux 并未提供完善的 reducer 代码分块方案。lazy-reducer 通过提供 Container (容器组件) 和 HOC (高级组件) 两种方式简化 reducer 的代码分块问题。

Install

npm install --save-dev lazy-reducer

API

配置 lazyReducerEnhancer

使用 lazy-reducer唯一需要做的:添加一个 store enhencer 。
** 注 **:lazyReducerEnhancer 接受的参数是一个reducers的对象,不是 combineReducers(reducers) 后的 reducer 方法。

import { lazyReducerEnhancer } from 'lazy-reducer';

const rootReducerObj = {
    nameA: reducerA,
    nameB: reducerB
};
const store = createStore(combineReducers(rootReducerObj), {}, lazyReducerEnhancer(rootReducerObj));

容器组件 <LazyReducer reducers/>

内联在 LazyReducer 中的子组件,只有当 reducers 被注册到 redux 中才会被渲染。

import { LazyReducer } from 'lazy-reducer';

<LazyReducer
    reducers={done => {
        import('./someReducer').then((reducer) => {
            done({
                nameA: someReducer
            })
        })
    }}
>
    <AnyComponent />
</LazyReducer>

高级组件 withLazyReducer(reducers)

withLazyReducer 高阶组件嵌套的组件,只有当 reducers 被注册到 redux 中才会被渲染。

import { withLazyReducer } from 'lazy-reducer'

class Comp extends Component {
    render() {
        <div>i am a Component wrapped by lazy reducer !</div>
    }
}

export default withLazyReducer(done => {
    import('./someReducer').then((reducer) => {
        done({
            nameA: someReducer
        })
    })
})(Comp)

高级组件的@注解方式 @withLazyReducer(reducers)

@withLazyReducer(done => {
    import('./someReducer').then((reducer) => {
        done({
            nameA: someReducer
        })
    })
})
class Comp extends Component {
    render() {
        <div>i am a Component wrapped by lazy reducer !</div>
    }
}

其他使用场景

结合 react-router

import { LazyReducer } from 'lazy-reducer'
import Homepage from './Homepage'

const route = {
    path: '/homepage',
    component: (
        <LazyReducer
            reducers={done => {
                import('./homepageReducer').then(reducer => {
                    done({
                        homepage: reducer.default
                    })
                })
            }}
        >
            <Homepage />
        </LazyReducer>
    )
}

example

examples

About

实现动态加载 reducer,简化 reducer 的代码分块

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published