tonyhb / autoaction Goto Github PK

const actionCreators = {
     load: loadSpy
};

const autoActions = {
            load: {
                args: (state, props) => "xyz",
                key: (state, props) => "xyz"
            }
 };
const decorator = autoaction(autoActions, actionCreators);

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'
import autoaction from 'autoaction';
import { createStructuredSelector } from 'reselect';

const actions = {
    getDashboardById(id) {
        console.log("GET_DASHBOARD", id)
        return {
            type: "GET_DASHBOARD",
            payload: {
                id: id,
                name: "dashboard"+id,
                cards: [id + 1, id + 2, id + 2, id + 3]
            }
        };
    },
    getCardById(id) {
        console.log("GET_CARD", id)
        return {
            type: "GET_CARD",
            payload: {
                id: id,
                name: "card"+id
            }
        };
    }
}


function reducer(state = { cards: {}, dashboards: {} }, { type, payload }) {
    switch (type) {
        case "GET_DASHBOARD":
            return { ...state, dashboards: { ...state.dashboards, [payload.id]: payload }};
        case "GET_CARD":
            return { ...state, cards: { ...state.cards, [payload.id]: payload }};
        default:
            return state;
    }
}

@connect(createStructuredSelector({
    dashboard: (state, props) => state.dashboards[props.dashboardId]
}))
@autoaction({
    getDashboardById: (props, state) => props.dashboardId
}, actions)
class Dashboard extends Component {
    render() {
        const { dashboard } = this.props;
        return (
            <div>
                <h1>dashboard={dashboard && dashboard.name}</h1>
                <ul>
                    {dashboard && dashboard.cards.map(id =>
                        <Card cardId={id} />
                    )}
                </ul>
            </div>
        );
    }
}

@connect(createStructuredSelector({
    card: (state, props) => state.cards[props.cardId]
}))
@autoaction({
    getCardById: (props, state) => props.cardId
}, actions)
class Card extends Component {
    render() {
        const { card } = this.props;
        return (
            <li>card={card && card.name}</li>
        );
    }
}

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            dashboardId: "100"
        }
    }
    render() {
        const { dashboardId } = this.state;
        return (
            <div className="App">
                <input value={dashboardId} onChange={(e) => this.setState({ dashboardId: e.target.value })} />
                <Dashboard dashboardId={parseInt(dashboardId)} />
            </div>
        );
    }
}

ReactDOM.render(
    <Provider store={createStore(reducer)}>
        <App />
    </Provider>,
    document.getElementById('root')
);