小编Roc*_*Roc的帖子

NPM:找不到"npm link"模块后

我正在为NodeJS开发两个模块,第一个是命名的aligator,第二个是aligator-methods.第二个依赖于第一个工作.我正在同时开发这两个模块,我想要全局链接,aligator所以我可以像在npm注册表上一样使用它,我只是全局安装它.要做到这一点,NPM文档说我需要使用,npm link但它不起作用.

package.json模块文件aligator:

{
  "name": "aligator",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "private": true,
  "directories": {
    "doc": "docs",
    "example": "examples",
    "test": "spec"
  },
  "scripts": {
    "test": "gulp jasmine"
  },
  "author": "Roc Alayo Arnabat",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-jasmine": "^0.2.0",
    "gulp-jshint": "^1.6.1",
    "gulp-rename": "^1.2.0",
    "jasmine-node": "^1.14.3"
  },
  "dependencies": {
    "bluebird": "^1.2.4",
    "lodash": "^2.4.1",
    "mathjs": "^0.22.0"
  }
}
Run Code Online (Sandbox Code Playgroud)

package.json模块文件aligator-methods:

{
 "name": "aligator-methods",
 "version": "0.0.1",
 "description": "", …
Run Code Online (Sandbox Code Playgroud)

node.js npm

68
推荐指数
8
解决办法
3万
查看次数

为React可重用组件设计Redux操作和Reducer

我正在使用Redux和React开发一个大型应用程序,我决定制作一些可重用的组件,如自定义复选框和单选按钮.

由于我想将此信息存储到Redux存储中以便能够轻松调试应用程序的状态,并且相同的组件在任何地方都具有相同的功能,因此为每个组件创建reducer和actions似乎是个好主意.

但是Redux reducers返回一个新状态并将其保存在商店中,并将reducer的名称作为键,并且禁止在同一页面中使用相同的actions和reducers但在保持不同状态的情况下在同一类型中具有多个相同类型的组件.

我认为这个问题有两个解决方案:

  • 为我使用的每个组件创建不同的操作和缩减器,甚至认为组件和它的功能是相同的.这个解决方案似乎不是一个好的解决方案,因为会有很多冗余代码.

  • 创建具有足够参数的操作,以便能够区分reducer中的每个参数,并且这样只会更改指定状态的一部分.

我推出了第二个选项.

CheckBox组件的Actions文件:

import {createAction} from 'redux-actions';

/****** Actions ******/
export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE";

/****** Action creators ******/
export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) => {
  return {
    block,
    name,
    state: {
      checked: state,
    }
  };
});
Run Code Online (Sandbox Code Playgroud)

CheckBox组件的Reducers文件:

import {handleActions} from 'redux-actions';

import {CHANGE_CHECKBOX_STATE} from './CheckBox.actions';

export const checkBoxComponent = handleActions({
  CHANGE_CHECKBOX_STATE: (state, action) => ({
    [action.payload.block]: {
      [action.payload.name]: action.payload.state
    }
  })
}, {});
Run Code Online (Sandbox Code Playgroud)

block用来指定页面,name指定特定组件的名称(例如性别)和状态as和具有新状态的对象.

但是这个解决方案也存在一些问题:

  • 无法指定每个组件的初始状态,因为状态的键是动态的. …

javascript reactjs redux

19
推荐指数
2
解决办法
9406
查看次数

标签 统计

javascript ×1

node.js ×1

npm ×1

reactjs ×1

redux ×1