为React可重用组件设计Redux操作和reducers
我正在使用Redux和React开发一个大型应用程序，我决定制作一些可重用的组件，比如自定义复选框和单选按钮。
由于我希望将这些信息存储到Redux存储中，以便能够轻松地调试应用程序的状态，并且相同的组件在任何地方都具有相同的功能，因此为每个组件创建reducers和actions似乎是一个好主意。
然而，Redux reducers返回一个新的状态，并将其保存在存储中，并以reducer的名称作为键，这禁止在同一页面中具有多个相同类型的组件，使用相同的操作和reducer，但保持不同的状态。
我认为这个问题有两种解决方案：
- 为我使用的每个组件创建不同的操作和缩减程序，即使该组件和它的功能是相同的。此解决方案似乎不是一个好的解决方案，因为将有许多冗余代码。
- 创建的操作具有足够的参数，以便能够区分reducer中的每个操作，这样只会更改指定的状态部分。
我选择了第二种选择。
CheckBox组件的操作文件：
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,
}
};
});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
}
})
}, {});我使用block指定页面，使用name指定特定组件的名称(例如性别)，使用新状态指定状态为和对象。
但是这个解决方案也有一些问题：
- 不能指定每个组件的初始状态，因为状态的键是按组件而不是按表单来指定具有大量嵌套states.
- Aggregates数据的存储结构的，这将使调试变得复杂，并且在逻辑上是不正确的。
我没有足够的Redux和React经验来想出一个更好的解决方案来解决这个问题。但在我看来，我遗漏了React-Redux关系的一些重要内容，这引发了一些问题：
- 将此可重用组件的状态存储到Redux存储中是个好主意吗？
- 将React组件与Redux操作和reducers绑定在一起是错误的吗？
回答 2
Stack Overflow用户
发布于 2015-10-04 01:42:50
不要用使用Redux reducers的组件来描述Redux reducers(整个应用程序状态)。以另一种方式跟踪它，以描述性方式描述您的应用程序状态，然后让您的“哑巴”组件使用该描述性状态。
不是跟踪“与foo相关的表单的此复选框的状态”，而是跟踪"this boolean value of foo"，然后让复选框使用该状态。
checkbox的示例存储：
const initialState = {
someFooItem: { isCertainType: false }
};
export function foos(state = initialState, action) {
switch(action.type){
case(UPDATE_FOO_VALUE):
return {
...state,
[action.payload.id]: {
isCertainType: action.payload.isCertainType
}
}
}
}使用商店的示例复选框
class CheckBox extends React.Component {
render() {
return <input type="checkbox" checked={this.props.checked} />
}
}父组件
class ParentComponent extends React.Component {
render() {
return <CheckBox checked={this.foo.isCertainType} />
}
}Stack Overflow用户
发布于 2015-08-28 22:21:27
这里最根本的错误是你有0个哑巴组件。像checkbox这样的基本控件应该是只使用道具的哑巴组件，它们的父级负责为特定的checkbox选择和更新适当的状态。
https://stackoverflow.com/questions/32272890
复制相似问题