redux-reducer

ts项目的 redux数据流

index.ts

import { MyModuleActions, MyModuleState } from './types';
import { MY_MODULE_ACTIONS } from './action-types';
export const initialState: MyModuleState = {
    data: null,
};
export default function MyModuleReducer(state = initialState, action: MyModuleActions): MyModuleState {
    switch (action.type) {
        case MY_MODULE_ACTIONS.SET_DATA:
            return {
                ...state,
            };
        default:
            return state;
    }
}

action-type.ts

export enum MY_MODULE_ACTIONS {
    SET_DATA = 'myModule/SET_DATA',
}

action.ts

import { Dispatch } from 'redux';
import { MY_MODULE_ACTIONS } from './action-types';
import { FetchDataAction } from './types';
export const fetchData = (data: any) => (dispatch: Dispatch<FetchDataAction>) => {
    dispatch({ type: MY_MODULE_ACTIONS.SET_DATA, data });
};

types.ts

类型约束

import { Action } from 'redux';
import { MY_MODULE_ACTIONS } from './action-types';
export interface MyModuleState {
    data: any;
}
export type FetchDataAction = Action< MY_MODULE_ACTIONS.SET_DATA> & {
}
export type MyModuleActions = FetchDataAction;

component组件

import React from 'react';
type Props = {}
export default function myComponent({}: Props) {
    return (<div className="my-component"/>);
}