Skip to content

shadow-Fiend/Redux_study

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React 只是 DOM 的一个抽象层,并不是 web 应用的完整解决方案。有两个方面他没涉及:

1.代码结构

2.组件之间的通信

注:示例来自 Redux 作者,自己敲一遍有所改动并添加了自己的理解 --- Redux 原址


Redux 是什么

Redux 是 js 的状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。

Redux 设计思想
  • web 应用是一个状态机,视图与状态是一一对应的

  • 所有的状态保存在一个对象里面

安装
// 安装稳定版:
npm install --save redux
// 多数情况下,你还需要使用 React 绑定库和开发者工具
npm install --save react-redux
npm install --save-dev redux-devtools

应用中所有的 state 都以一个对象树的形式存储在单一的 store 中。唯一改变 state 的方法就是触发 action,一个描述发生了什么的对象,为了描述 action 如何改变 state 树,需要编写 reducers。

  • Action 就是一个普通的 JS 对象,用来描述发生了什么

  • reducer 只是一个接收 state 和 action,并返回新的 state 的函数

  • store 把 action 和 reducer 联系到一起,维持应用的 state,提供 getState() 方法获取 state ,提供 dispatch(action) 更新 state,提供 subscribe(listener) 来注册/注销监听器。

Redux 状态管理过程

Redux 状态

  • View 通过 dispatch 触发事件 Action

  • Reducer 根据 Action 来修改数据

  • Store 保存 Reducer 新数据并触发 subscribe 事件

  • View 通过 subscribe 订阅获取新数据并进行展示

可以看出 Redux 的单向数据流动的特点:View --- Action --- Reducer --- Store --- View

Redux 生命周期遵循的四个步骤
  • 调用 Store.dispatch(action) action 就是一个描述发生了什么的普通对象

  • Redux Store 调用传入的 reducer 函数。Store 会把当前的两个参数 ( 当前的 state 树, action ) 传入 reducer

  • 根 reducer 应该把子 reducer 输出合并成一个单一的 state 树

  • Redux Store 保存了根 reducer 返回的完整 state 树

1.这颗新树就是应用的下一个 state,所有订阅 store.subscribe(listener) 的监听器都将被调用,监听器里可以调用 store.getState() 获得当前 state

2.现在可以应用新的 state 来更新 UI,如果你使用了 React Redux 这类的绑定库,这时就应该调用 component.setState(newState) 来更新

About

there will be some instances in the examples files.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published