关于redux

来源:互联网 发布:点菜软件介绍 编辑:程序博客网 时间:2024/06/06 15:49

基本原则

  • 应用中的state以对象树的形式存储在store(唯一)中,通过store.getState()可以获取state对象树。
  • state是只读的,只能通过触发一个action来改变state
    store.dispatch()触发action
  • 通过编写reducer来指定state对象树如何通过action进行改变。reducer是纯js函数,以prevState和action为入参,返回新的state对象。

action

  • action是一个仅包含{type,payload}的对象,type表示action的类型,必须,payload是action携带的数据,通过store.dispatch()来发送。
  • 一般使用函数(Action Creators)来生成action,Action Creators是一个纯js函数,返回一个action对象。

    Reducer

  • Reducer用来处理action触发的对状态树的更改,接受 prevState和action两个参数,返回newState。
  • (prevState,action) => newSate

Store

  • store保存整个应用的state树
  • 通过getState()获取state
  • 通过dispatch()发送action
  • 通过subscribe()监听state的更改
  • 将root reducer函数作为入参传递给createStore()即可以获得Store

组织redux的流程

  • 首先设计全局state的数据结构
  • 设计actionTypes常量
  • 根据actionTypes书写actionCreators函数
  • 然后根据actionCreators的返回值,书写reducer函数
  • 有了reducer之后,createStore(reducer,initState)获取store对象
  • 然后用bindActionCreators将action和dispatch绑定在一起
  • 然后将状态修改函数分发给component(如果使用react-redux,使用Provider+ connect组织数据流,使用redux的话,封装render函数,在store.subscribe事件回调里使用)
  • -
原创粉丝点击