• Redux基础


    1. Redux 是一个状态容器
      Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说,不用关心数据是怎样变化,只需要在 view 层面等待 store 通知自己数据发生变化,然后把数据渲染成页面即可。

    2. Redux 和 React 之间没有关系
      Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。 尽管如此,Redux 还是和 React 和 Deku 这类框架搭配起来用最好,因为这类框架允许你以 state 函数的形式来描述界面,Redux 通过 action 的形式来发起 state 变化。

    3. redux中的action、reducer、store三者之间的概念
      应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中
      惟一 改变 state 的办法是触发 action ,一个描述发生什么的对象。
      为了 描述 action 如何改变 state 树,你需要编写 reducers

    4. 示意图
      用户产生action-->store.dispatch(action)-->reducer(state,action)-->store.getState();
      示意图


    Redux API

    Redux 的 API 非常少。Redux 定义了一系列的约定(contract)来让你来实现(例如 reducers),同时提供少量辅助函数来把这些约定整合到一起。

    这一章会介绍所有的 Redux API。记住,Redux 只关心如何管理 state。在实际的项目中,你还需要使用 UI 绑定库如 react-redux。

    顶级暴露的方法
    • createStore(reducer, [initialState]) 【 创建 一个Redux store 来以存放应用中所有的 state。 应用中应有且仅有一个 store。】
    • combineReducers(reducers) 【combineReducers 辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。】
    • applyMiddleware(...middlewares) 【Middleware 可以让你包装 store 的 dispatch 方法来达到你想要的目的。】
    • bindActionCreators(actionCreators, dispatch) 【惟一使用 bindActionCreators 的场景是当你需要把 action creator 往下传到一个组件上,却不想让这个组件觉察到 Redux 的存在,而且不希望把 Redux store 或 dispatch 传给它。】
    • compose(...functions) 【从右到左来组合多个函数。 这是函数式编程中的方法,为了方便,被放到了 Redux 里。 当需要把多个 store 增强器 依次执行的时候,需要用到它。】
    Store API
    • Store 【Store 就是用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的惟一途径是对它 dispatch 一个 action。】
      • getState() 【返回应用当前的 state 树。 它与 store 的最后一个 reducer 返回值相同。】
      • dispatch(action) 【分发 action。这是触发 state 变化的惟一途径。】
      • subscribe(listener) 【添加一个变化监听器。每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。】
      • getReducer()
      • replaceReducer(nextReducer) 【替换 store 当前用来计算 state 的 reducer。】

    React Redux

    Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。本库并不是 Redux 内置,需要单独安装。 一般会和 Redux 一起使用

    API
    • 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 中才能使用 connect() 方法。】
    • connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) 【连接 React 组件与 Redux store。 连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。】

    demo 介绍

    目录结构:
    
    | -- actions             #action文件夹
    | -- components          #组件文件夹
    | -- constants           #ActionTypes 文件夹
    | -- containers          #容器文件夹(一般存放APP.js)
    | -- reducers            #reducers文件夹
    | -- 以及一些其它基本文件
    

    demo地址: todoMVC


    参考文档

  • 相关阅读:
    【QCon笔记】Native 和 Web 融合
    点透
    测试
    Moom for mac 最棒的窗口管理软件
    Egret白鹭H5小游戏开发入门(三)
    Egret白鹭H5小游戏开发入门(二)
    Egret白鹭H5小游戏开发入门(一)
    关于Canvas模糊的问题
    利用Canvas实现360度浏览
    JS中取整以及随机颜色问题
  • 原文地址:https://www.cnblogs.com/yldf55/p/5644814.html
Copyright © 2020-2023  润新知