react-easy-redux

English | 中文版

A plugin that simply encapsulates redux and redux-saga. It can be used directly for React 、React-Native

Notice

This package depend on redux、redux-saga 、react-redux，So you no need install them additionally !!!!

Feature

1. Easier integration of redux, redux-saga. if you install this package,You don't need to install redux、redux-saga、react-redux additionally.

2. Automatically define a loading variable in the redux state when you trigger a effect function. Support for custom Plugin.

Background

redux + redux-saga directly is not friendly to novices. Especially redux-saga, many novices are confused about it.

It inspired by dva.js, Why not use dva.js directly ?

Because it is too large, contains many features that are not needed for small and medium projects, and cannot be used directly in React-Native.

Getting Started

Installation

npm i react-easy-redux --save

Basic Usage

import { Provider, getStore,connect } from 'react-easy-redux';

const model = {
    namespace:'test',
    state:{
        msg:'hello,world'
    },
    effects:{
        *fetch(payload,{call,put}) {
            const response = yield call(fetchApi,payload);
            yield put({
                type: 'save',
                payload: {
                    msg:response
                }
            })
        }
    },
    reducers:{
         save(state, action) {
            return {
                ...state,
                ...action.payload
            };
        },
    }
};

// init store
const store = getStore([model]);



export default class App extends React.Component {
    render: function() {
        return (
           <Provider store={store}>
              <div>hello,world</div>
           </Provider>
        )
    }
}

// connect Component
const Test = (props) => {
    return (
        <div>{props.msg}</div>
    )
}

const mapStateToProps = ({test}) => ({
    msg: test.msg
})

export const ConnectTest = connect(Test,mapStateToProps);

API

Model

propName	type	required	desc
namespace	string	true	The name of the module that was eventually injected into the reducer
state	object	true	State injected into the corresponding reducer module
effects	object	false	Effects injected into redux-saga, you can use effects methods like call、 put and so on...
reducers	object	false	Reducer calculation method in redux

connect

The method for injecting react components into redux is simplified on the basis of react-redux, and it automatically injects dispatch methods into components.

const Test = props => {
    return <div>{props.msg}</div>;
};

const mapStateToProps = ({ test }) => ({
    msg: test.msg
});

export const ConnectTest = connect(Test, mapStateToProps);

dispatch

The component after connect will have methods to trigger the corresponding effects methods. Returns a Promise. The triggered effects method will trigger the corresponding loading = true before use, and loading = false after execution.

this.props.dispatch({
    type: 'namespace/effectFunctionName',
    payload: {
        a: 1,
        b: 1,
        catchSelf: false
    }
});

Parameters of the dispatch method

name	type	required	desc
catchSelf	boolean	false	Defaults false，If set to true, the exception of the triggered effect method will be thrown, and the promise returned by dispatch needs to catch itself

loading

Comes with a loading plugin. Each time the effect method is triggered, a loading variable is automatically generated in the state of redux for loading in exec asynchronous method.

const Test = props => {
    useEffect(() => {
        props.dispatch({
            type: 'test/aFun'
        });
    });
    return <div>{props.testLoading}</div>;
};

const mapStateToProps = ({ test,loading }) => ({
    msg: test.msg，
    testLoading:loading['test/aFun']
});

export const ConnectTest = connect(Test, mapStateToProps);

Next

No

Other

Welcome PR!!!! The first release of the npm package must have many shortcomings.

License

MIT

Create By daizq