React/Flux Score Card Implementation

VotingActions.js

import { api } from "../../../../assets/scripts/js/api";
import dispatcher from '../_shared/FluxAppDispatcher';
import constants from '../_shared/FluxAppConstants';

export function initScoreCardData(props){
    dispatcher.dispatch({
        type:constants.score_card_init_data,
        payload: {
            index: props.postId,
            object: props,
        }
    });
}

export function updateCategoryScore(post_id, category_index, score) {
    dispatcher.dispatch({
        type: constants.score_card_update_category_score,
        payload: {
            postId: post_id,
            category_index:   category_index,
            score:   score,
        }
    });
}

export function submitScore(post_id, scoring) {

    dispatcher.dispatch({
        type: constants.score_card_show_loader,
        payload: {
            postId: post_id
        }
    });

    api.post('/voting/api/url', {
        post_id: post_id,

        vote_data: this.formatUserScoresForBackend(scoring)

    }).done((response) => {

        let revealEvent = new Event('reveal-author-and-score', { bubbles: true });

        this.wrapperElement.dispatchEvent(revealEvent);

        dispatcher.dispatch({
            type: constants.score_card_finish_scoring,
            payload: {
                postId: post_id,
                currentResults: {
                    totalNumberOfVotes: response.data.totalNumberOfVotes,
                    averageCommunityScore: response.data.averageCommunityScore,
                    currentUserScore: response.data.currentUserScore,
                },
                currentUserCanVote: false,
                isLoading: false,
            }
        });

    });

}

export function restartScoring(post_id) {
    dispatcher.dispatch({
        type: constants.score_card_restart_scoring,
        payload: {
            postId: post_id,
        }
    });

}

VotingContainer.js

import React from 'react';

import ImageRanker from "../Voting__ImageRanker/Voting__ImageRanker";
import VotingStore from './VotingStore';
import * as actions from './VotingActions';

import {Container} from 'flux/utils';


class VotingContainer extends React.Component {

    static getStores() {
        return [VotingStore];
    }

    static calculateState() {
        return VotingStore.getState();
    }

    render() {
        return React.createElement(ImageRanker, this.state[this.props.postId]);
    }

    componentWillMount() {
        actions.initScoreCardData(this.props);
    }

}

export default Container.create(VotingContainer);

VotingStore.js

import {ReduceStore} from 'flux/utils';
import dispatcher from '../_shared/FluxAppDispatcher';
import constants from '../_shared/FluxAppConstants';
import clone from 'fast-clone';

class VotingStore extends ReduceStore {
    constructor() {
        super(dispatcher);
    }

    getInitialState() {
        return {};
    }

    reduce(prevState, action) {
        // !!! Do not mutate old state !!!
        let newState = clone(prevState);

        switch (action.type) {

            case constants.score_card_init_data:
                if(!prevState[action.payload.object.postId]) {
                    newState[action.payload.object.postId] =  action.payload.object;
                }

                break;

            case constants.score_card_show_loader:
                newState[action.payload.postId].isLoading = true;
                break;

            case constants.score_card_update_category_score:
                newState[action.payload.postId].userScores[action.payload.category_index] = action.payload.score;
                break;

            case constants.score_card_finish_scoring:
                newState[action.payload.postId].isLoading = false;
                newState[action.payload.postId] = {...newState[action.payload.postId], ...action.payload};
                break;


            case constants.score_card_restart_scoring:
                newState[action.payload.postId].userScores = [];
                break;

        }

        return newState;
    }
}

export default new VotingStore();