https://github.com/ice-zjchen/redux-fool

Simple utilities and middlwares for Redux.
https://github.com/ice-zjchen/redux-fool

redux redux-actions redux-fool redux-thunk

Last synced: about 1 month ago
JSON representation

Simple utilities and middlwares for Redux.

• Host: GitHub
• URL: https://github.com/ice-zjchen/redux-fool
• Owner: ice-zjchen
• License: mit
• Created: 2017-12-01T03:39:13.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-11-18T14:38:12.000Z (about 5 years ago)
• Last Synced: 2024-01-23T22:09:25.142Z (12 months ago)
• Topics: redux, redux-actions, redux-fool, redux-thunk
• Language: JavaScript
• Homepage:
• Size: 300 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# redux-fool

[![npm version](https://badge.fury.io/js/redux-fool.svg)](https://badge.fury.io/js/redux-fool)

**New APIs in v0.4.**

It is compatibile with [v0.3.x](https://github.com/ice-zjchen/redux-fool/tree/0.3.4) action/reducer declaration.

## Install

```

npm install redux-tool --save

```

## How fool it is?

1. Provide a good practice of global state design referred to [standard-redux-shape](https://github.com/ecomfe/standard-redux-shape#standard-shape-of-store).

2. Replace actionType + action + reducer with simple `model` configure.

## Quick Start

##### index.js

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { init } from 'redux-fool';

import todo from './models/todo';

import todoReducers from './reducers/todo';

const models = { todo };

// compatible with v0.3

const reducers = { todo: todoReducers };

const store = init({

  name: 'myApp',

  models,

  reducers,

});

const Root = (

  

    

  

);

ReactDOM.render(Root, document.getElementById('root'));

```

##### model.js

```javascript

import * as request from '../request';

import _ from 'lodash';

const todo = {

    state: {},  // initial state

    // configure async actions

    requests: {

        getTodos: {

            // a Promise, usually a api call 

            fetch: query => request.getTodos(query),

            // advanced configs, refer to https://github.com/ice-zjchen/redux-fool/blob/master/docs/utils.md#makeAsyncActionCreator

            withTableUpdate: {

                tableName: 'todoById',

                selectEntities: res => ({ [res.uuid]: res }),

            },

            computeParams: () => 'all',

            cocurrent: false,

            once: false,

            selectQuerySet: () => null,

        }

    },

    // configure reducers of sync actions

    handlers: {

        toggleTodo: (state, { payload }) => {

            // do something here

            return state;

        },

    },

};

export default todo;

```

##### List.js

```javascript

import React, { Component } from 'react';

import { connect } from 'react-redux';

import todoActions from './actions/todo';

class List extends Component {

    retrieveTodos = () => {

        // dispatch action

        this.props.actions.getTodos();

    }

    render() {

        

            Retrieve All Todos

        

    }

}

const mapStateToProps = state => state;

const mapDispatchToProps = dispatch => ({

    actions: {

        ...dispatch.todo,  // actions in `dispatch` object

        ...todoActions  // compatible with v0.3

    }

});

export default connect(

    mapStateToProps,

    mapDispatchToProps

)(List);

```