Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 在redux中有嵌套的还原程序吗?_Reactjs_Structure_Redux_React Redux - Fatal编程技术网

Reactjs 在redux中有嵌套的还原程序吗?

Reactjs 在redux中有嵌套的还原程序吗?,reactjs,structure,redux,react-redux,Reactjs,Structure,Redux,React Redux,给定initialStore={users:{}}的应用程序,其中每个用户都以其id作为键存储在用户中,如果组件显示用户列表,则在更新此对象中的单个用户时,整个列表被重新呈现,这是预期的,因为reducer确实返回了一个新对象作为状态,尽管reducer实际需要的只是更改一个键 示例代码 ducks/users.js const LoadAllAction = ()=>({ type:'USERS/LOAD',users:{1:{id:1,if:0},2:{id:2,if:0}} });

给定initialStore={users:{}}的应用程序,其中每个用户都以其id作为键存储在用户中,如果组件显示用户列表,则在更新此对象中的单个用户时,整个列表被重新呈现,这是预期的,因为reducer确实返回了一个新对象作为状态,尽管reducer实际需要的只是更改一个键

示例代码

ducks/users.js
const LoadAllAction = ()=>({ type:'USERS/LOAD',users:{1:{id:1,if:0},2:{id:2,if:0}} });
const LoadSingleAction = ()=>({ type:'USERS/SINGLE',user:{id:2,if:1} });

//THIS REDUCER HANDLE THE USERS SLICE OF STORE
const reducer = (state={},action)=>{

if(action.type === 'USERS/LOAD')return action.users;

if(action.type === 'USERS/SINGLE')return Object.assign({},state,{[action.user.id]:action.user});

return state;
}

const rootReducer = combineReducers({users:reducer});
const store = createStore(rootReducer, {users:{}});
以上是我正在调查的问题的设置。。现在给出一个简单的React组件,它使用connect订阅存储

const UsersPage = props=>(
    <ul> 
         {Object.keys(props.users).map((u)=>(
           <li key={u.id}>ID :: {u.id}</li>
         ))}
    </ul>
  );

const mapStateToProps(state)=>({users:state.users});

const component = connect(mapStateToProps)(UsersPage);
然而现在,ul和li都重新呈现了这一点。因此,我突然想到,问题是每次需要更新单个用户时,我的reducer都会返回一个新的用户存储,因此如果我想防止这种情况发生,我需要为每个用户提供一个子reducer

但据我所知,redux存储需要是平坦的,并且减缩器只按键切片,而不是按子键切片

-在redux中嵌套减缩器是否可能/正常/呢


我的意思是说,我看到了大量简单的todos应用程序,它们从来没有看到过现实世界中的大规模应用程序结构可以引导我们走出这一困境,那么redux专家在规划这些应用程序时是如何做到这一点的呢?

首先:是的,完全有可能以各种方式嵌套reducer函数。毕竟,它们只是功能,如何构建逻辑完全取决于您

您所描述的问题的标准方法是规范化您的状态,这样您就有了“查找表”,其中每个项都可以通过其ID进行查找,并有ID数组来表示所有项。然后连接父列表,检索ID数组,并将一个ID传递给每个子列表项。每个列表项组件都将被连接,接收其项ID作为道具,并使用该ID在
mapState
中查找自己的项

我有很多描述这些方法的链接:

  • 首先是一份聊天记录,我在其中描述了这个确切的场景:
  • 第二,我收集的关于Redux性能优化的文章链接:。特别是,本演示将详细介绍此主题
  • 最后,我一直在为Redux文档编写一组新的页面,涵盖构造减缩器的方法。当前WIP位于,包括一节,以及许多其他相关主题

但即使我将id传递给已连接的listItem,在更新右侧的项目后,整个列表仍会根据列表状态的变化进行更新?哦。所以你的意思是我应该在父组件中使用类似于
Object.keys(state.users)
的东西,以便下次它检查时,它具有相同的值,这样父组件就不会运行了!现在我明白你所说的标准化是什么意思了,我在想‘这是一个平面对象,我怎么能把它标准化得更多:D!’通常,特定类型数据的规范化结构如下所示:
{users:{byId:{1:{},98:{},123:{},items:[1,98,123]}
。因此,您将拥有一个包含所有项目ID的数组,该数组已处于状态。
///LiComponent connect function example
const mapStateToProps(state,ownProps)=>({users:state.users[ownProps.key]});