项目作者: kutlugsahin

项目描述 :
Opinionated version of Redux for lazy developers :) no action types no switch cases and no reducers (only name and initial state definitions)
高级语言: JavaScript
项目地址: git://github.com/kutlugsahin/lazy-redux.git
创建时间: 2017-03-01T20:06:50Z
项目社区:https://github.com/kutlugsahin/lazy-redux

开源协议:

下载


Lazy-Redux

An opinionated version of redux for fast prototyping. No action types, no reducers with switch cases.
But still redux is used internally.

Installation

  1. npm install --save lazy-redux

Create Store

Action and reducer definitions are passed to createStore function to populate reducers internally,

  1. import {createStore} from 'lazy-redux';
  2. import * as actions from 'my/path/to/actions';
  3. const reducerDefinitions = {
  4. ui : { loading: false, isLeftPanelOpen: false } // <reducer-name> : <initial-state>
  5. ...
  6. ...
  7. };
  8. const store = createStore(reducerDefinitions, actions /* ,middleswares, enhancer */);
  9. let root = <Provider store={store}><App></App></Provider>;

Actions

Actions should return a function (normal function, async function or generator function) with two parameter.
First parameter is the object whose keys are reducer names and values are the setter funtion.
Second one is the classical getState param of thunk middleware.
An example of action.js is as follows.

  1. export function setUILoading(isLoading){
  2. return ({ui}, getState) => {
  3. ui.set({loading: isLoading});
  4. }
  5. }

Or async functions like

  1. export function getUsers(){
  2. return async function({ui, users}, getState){
  3. ui.set({loading: true});
  4. let users = await api.get('example.com/users'); // api.get function is assumed to be a promise.
  5. users.set(users);
  6. ui.set({loading:false});
  7. }
  8. }

or generator function

  1. export function getUsers(){
  2. return function* ({ui, users}, getState){
  3. ui.set({loading: true});
  4. let users = yield api.get('example.com/users');
  5. ...
  6. }
  7. }

For the example above, actually there is a reducer named ‘ui’ (which you defined at createStore stage)generated by lazy-redux and a set function is defined for every reducer to set the new state. You can access any reducer setter from the first param of the returning function.

Connect

Simplified connect function of react-redux. No mapDispatchToProps function required. The actions are passed to component props as actions. mapStateToProps is simplified to an array of reducer names.

```javascript
import React, { Component } from ‘react’;
import { connect } from ‘lazy-redux’;
class MyComponent extends Component {
render() {
return (


{this.props.ui.loading ? ‘loading…’ : ‘ready!’}


);
}
}

// actions are mapped to “this.props.actions” by default
// an array of reducers to be mapped to props are passed to connect function
export default connect([‘ui’])(MyComponent);