美文网首页
react 中 redux 多个状态的拆分合并

react 中 redux 多个状态的拆分合并

作者: MissSixty | 来源:发表于2018-10-27 14:19 被阅读0次

因为整个store中只能存放一个状态,但是有时为了团队更好的协作开发,必须拆分若干个组件,这时我们就要想办法把一个状态分成多个小状态,再在store中合并为一个状态。

1.引入

import {combineReducers} from "redux";

2.使用

const reducer = combineReducers({  //将2个小状态合并
    title:titlereducer,  //标题的状态
    list:listreducer  //列表的状态
})

const store = createStore(reducer)  //返回一个大状态

注:因为合并完是一个大对象,所以在store.getState()时应再加上对象里的名字

this.setState({
    title:store.getState().title
})

上述方法就可将各个小组件都分给组员各自开发。最后通过ES6引入和导出方法将若干个小文件组合在一起。
store文件夹下推荐新建一个reducers子文件夹。store中只放index.js文件,其他子文件放到reducers文件夹中,使结构更清晰。

设计和使用的三大原则:
1.state以单一对象存储在store对象中
2.state只读(每次都返回一个新的对象)
3.使用纯函数reducer执行state更新

相关文章

  • react 中 redux 多个状态的拆分合并

    因为整个store中只能存放一个状态,但是有时为了团队更好的协作开发,必须拆分若干个组件,这时我们就要想办法把一个...

  • RN:React-Redux

    目录一. React-Redux是什么 1. React-Redux的组件拆分规范  1.1 UI组件  1.2 ...

  • 两张图看懂 React Redux 架构和数据流

    React 技术栈 React - 视图层Redux - 状态、数据层React-Redux - 连接Redux-...

  • react-redux

    redux 全局状态管理 react-redux 优化模块 优化redux的使用过程 通过react-redux ...

  • redux

    redux: react中的状态管理工具 相当于vue中的vuex redux官方文档:https://redux...

  • Redux

    redux: react中的状态管理工具 相当于vue中的vuex redux官方文档:https://redux...

  • react redux

    redux: react中的状态管理工具 相当于vue中的vuex redux官方文档:https://redux...

  • React实战之Redux

    Redux、React-Redux 简介 Redux 是 JavaScript 状态容器,提供可预测化的状态管理。...

  • JavaScript 的状态容器 Redux

    Redux JavasSript 的状态容器跟 React 没有关系,Redux 支持 React、Angular...

  • Redux配置文件

    配置: redux 是可预测状态容器,react-redux 是让 react 和 redux 结合工作的粘合剂,...

网友评论

      本文标题:react 中 redux 多个状态的拆分合并

      本文链接:https://www.haomeiwen.com/subject/vtldtqtx.html