uruha / next-with-ts

Next.js for boiler plate to easy development.
MIT License
21 stars 2 forks source link

Feature/add code generator of reducer, action #75

Closed doutori closed 4 years ago

doutori commented 4 years ago

Todo

how to use

npm run gen redux

or

npx hygen generate redux

Screen Shot

hygen

Generated Code Samples

Added Files

actions/sample/index.ts

import { GET_SAMPLE, UPDATE_SAMPLE } from '~/constant';
import { SampleActionTypes } from '~/actionTypes';
import { SampleState } from '~/stateTypes';

export const getSample = (): SampleActionTypes => ({
    type: GET_SAMPLE
});

export const updateSample = (payload: SampleState): SampleActionTypes => ({
    type: UPDATE_SAMPLE,
    payload,
});

actionTypes/sample.ts

import { GET_SAMPLE, UPDATE_SAMPLE } from '~/constant';
import { SampleState } from '~/stateTypes';

interface GetSampleAction {
    type: typeof GET_SAMPLE;
}

interface UpdateSampleAction {
    type: typeof UPDATE_SAMPLE;
    payload: SampleState;
}

export type SampleActionTypes = GetSampleAction | UpdateSampleAction;

reducers/sample/index.ts

import { GET_SAMPLE, UPDATE_SAMPLE } from '~/constant';
import { SampleActionTypes } from '~/actionTypes';
import { SampleState } from '~/stateTypes';

export const initialSample: SampleState = {
    value: ''
};

export const sample = (
    state = initialSample,
    action: SampleActionTypes
): SampleState => {
    switch (action.type) {
        case GET_SAMPLE:
            return state;

        case UPDATE_SAMPLE:
            return { ...state, ...action.payload };

        default:
            return state;
    }
};

reducers/sample/test/sample.test.ts

import snapshotDiff from 'snapshot-diff';
import { updateSample } from '~/actions/sample';

import { initialSample, sample } from '~/reducers/sample';
import { SampleState } from '~/stateTypes';

const testingSample: SampleState = {
    value: 'hoge'
};

describe('Sample reducer', () => {
    it('update sample', () => {
        expect(
            snapshotDiff(
                initialSample,
                sample(initialSample, updateSample(testingSample))
            )
        ).toMatchSnapshot();
    });
});

Updated Files ( +++ line is added )

actionTypes/index.ts

export * from './account';
export * from './counter';
+++ export * from './sample';

constant.ts

...
export const GET_ACCOUNT = 'GET_ACCOUNT';
export const UPDATE_ACCOUNT = 'UPDATE_ACCOUNT';

+++ export const GET_SAMPLE = 'GET_SAMPLE';
+++ export const UPDATE_SAMPLE = 'UPDATE_SAMPLE';

reducers/reducers.ts

export { account } from '~/reducers/account';
export { counter } from '~/reducers/counter';
+++ export { sample } from '~/reducers/sample';

stateTypes.ts

...
export interface AccountState {
    data: Account;
}

+++ export interface SampleState {
+++    value: string;
+++ }
doutori commented 4 years ago

Is it too many features ? ? ? And more, needs redux-saga task generator, too?