Git Product home page Git Product logo

Comments (5)

HFO4 avatar HFO4 commented on July 24, 2024

感谢建议!
可能要到3.1版本那边的计划实现的差不多后才有时间开始进行重构。

from frontend.

zjsth92 avatar zjsth92 commented on July 24, 2024

我下周有空可以写单元测试

from frontend.

BadmasterY avatar BadmasterY commented on July 24, 2024

@zjsth92 是否考虑这样的拆分方式:

关于 redux

Redux 整体设计采用 Ducks

state

State 设计遵循以下原则(数据库设计原则):

  • 数据按照领域(Domain)分类,存储在不同的表中,不同的表中存储的列数据不能重复。
  • 表中每一列的数据都依赖于这张表的主键。
  • 表中除了主键以外的其他列,互相之间不能有直接依赖关系。

目录结构分配

// 仅供参考, 这里以我的项目为基准
redux/
- ducks
  - user.ts
  - article.ts
  - comment.ts
- reducers.ts
- store.ts

store.ts:

import { createStore } from 'redux';
import reducers from './reducers';

export default createStore(reducers);

reducers.ts:

// reducer 入口
import { combineReducers } from 'redux';
import user from './ducks/user';
import comment from './ducks/comment';
import article from './ducks/article';

// combineReducers
export default combineReducers({user, comment, article});

user.ts:

// Actions
export const types = {
    LOGIN: 'userLogin', // 登录
    LOGOUT: 'userLogout', // 登出
    UPDATE: 'userUpdate', // 更新信息
    COMMENT: 'comment', // 评论, 大概率移除
    PUBLISH: 'publish', // 发布, 大概率移除
};

// state
const initialState: State = {
    id: '', // key
    bio: '',
    url: '',
    nickname: '',
    username: '',
    position: '',
    isLogin: false,
};

// Reducer
export default function reducer(state = initialState, action: Action = {}) {
    const { payload } = action;
    switch (action.type) {
        case types.LOGIN:
            return Object.assign({}, state, payload);
        case types.LOGOUT:
            return Object.assign({}, state, initialState);
        case types.UPDATE:
            return Object.assign({}, state, payload);
        case types.COMMENT:
            return Object.assign({}, state);
        case types.PUBLISH:
            return Object.assign({}, state);
        default:
            return state;
    }
};

// Action creaters
export const actions = {
    userLogin: (payload: Payload) => ({ type: types.LOGIN, payload }),
    userLogout: () => ({ type: types.LOGOUT }),
    userUpdate: (payload: Payload) => ({ type: types.UPDATE, payload }),
    // 文章id 评论内容 content
    userComment: (payload: Payload) => ({ type: types.COMMENT, payload }),
    // 文章title 文章内容 content
    userPublish: (title: string, content: string) => ({ type: types.PUBLISH, payload: { title, content } }),
};

这样方便默认导出 reducer, 同时可以快速的通过 import { actions } from 'xxxx' 的形式拿到单独的 action creater

from frontend.

zjsth92 avatar zjsth92 commented on July 24, 2024
  1. Duck模式可以的。
  2. 新代码写成TS也可以
  3. 重构State目前不太现实,改动太大了只能一点点改。

from frontend.

AH-dark avatar AH-dark commented on July 24, 2024

Why not consider importing Redux Toolkit?

from frontend.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.